将数据传递到“路由器出口”子组件

Question

// parent component

@Component({
    selector : 'node-display',
    template : `
        <router-outlet [node]="node"></router-outlet>
    `
})

export class NodeDisplayComponent implements OnInit {

    node: Node;

    ngOnInit(): void {
        this.nodeService.getNode(path)
            .subscribe(
                node => {
                    this.node = node;
                },
                err => {
                    console.log(err);
                }
            );
    }

在几个儿童显示器中的一个中:

export class ChildDisplay implements OnInit{

    @Input()
    node: Node;

    ngOnInit(): void {
        console.log(this.node);
    }

}

似乎我不能直接将数据注入路由器出口。看起来我在web控制台中遇到了错误：

Can't bind to 'node' since it isn't a known property of 'router-outlet'.

这有点道理，但是我该怎么做：

1. 从服务器从父组件中获取“节点”数据？
2. 是否将从服务器检索到的数据传递到子路由器插座？

路由器插座的工作方式似乎不同。

Answer 1

是的，您可以将数据直接传入路由器出口组件。遗憾的是，你不能像在其他回答中提到的那样，使用角度模板绑定来做到这一点。您必须在typescript文件中设置数据。当涉及到可观测量时，有一个很大的警告(如下所述)。

方法如下:

<router-outlet (activate)="onOutletLoaded($event)"></router-outlet>

（2） 切换到父组件的 typescript 文件，并在每次激活子组件时以编程方式设置它们的输入：

onOutletLoaded(component) {
    component.someProperty = 'someValue';
} 

完成了。

onChildLoaded(component: MyComponent1 | MyComponent2) {
  if (component instanceof MyComponent1) {
    component.someInput = 123;
  } else if (component instanceof MyComponent2) {
    component.anotherInput = 456;
  }
}

此方法和服务方法都不是与子组件通信的“正确方式”（两种方法都远离纯模板绑定），因此您只需决定哪种方式更适合项目。

然而，这种方法避免了与“创建用于通信的服务”方法相关联的紧密耦合(即，父需要该服务，并且子都需要该服务，使得子在其他地方不可用)。

在许多情况下，这种方法也更接近于“角度方式”，因为您可以继续通过@Inputs将数据传递给子组件。它也非常适合于您不想或不能与您的服务紧密耦合的现有或第三方组件。

另一方面，它可能不像有棱角的方式，当...

警告

使用此方法的注意事项是，由于您是在typescript文件中传递数据，因此您不能再选择使用模板中使用的pipe-async模式(例如< code > { { myObservable $ | async } } )来自动使用可观察的数据并将其传递给子组件。

相反，每当调用＜code＞onchildload＜/code＞函数时，您需要设置一些东西来获取当前的可观察值。这可能还需要在父组件的onDestroy函数中进行一些拆卸。这并不是什么不寻常的事情，在很多情况下都需要这样做，比如当使用一个甚至没有到达模板的observable时。

Answer 2

但在这里，我们必须记住这些对象是通过引用传递的，因此，如果您想在子对象上做一些工作，而不影响父对象，我建议使用Günther的解决方案。但如果这不重要，或者实际上是期望的行为，我建议如下。

@Injectable()
export class SharedService {

    sharedNode = {
      // properties
    };
}

在您的父代中，您可以分配值:

this.sharedService.sharedNode = this.node;

在你的子节点(和父节点)中，在你的构造函数中注入共享服务。如果您希望在模块中的所有组件上提供单一服务，请记住在模块级提供者数组中提供服务。或者，只将服务添加到父级的providers数组中，然后父级和子级将共享服务的同一个实例。

node: Node;

ngOnInit() {
    this.node = this.sharedService.sharedNode;    
}

正如纽曼善意地指出的，您还可以使用＜code＞这个.sharedService。html模板或getter中的sharedNode：

get sharedNode(){
  return this.sharedService.sharedNode;
}

Answer 3

<router-outlet [node]="..."></router-outlet> 

另见https://angular.io/guide/component-interaction#parent-和-儿童-通过-服务通信

@Injectable() 
export class NodeService {
  private node:Subject<Node> = new BehaviorSubject<Node>([]);

  get node$(){
    return this.node.asObservable().filter(node => !!node);
  }

  addNode(data:Node) {
    this.node.next(data);
  }
}

@Component({
    selector : 'node-display',
    providers: [NodeService],
    template : `
        <router-outlet></router-outlet>
    `
})
export class NodeDisplayComponent implements OnInit {
    constructor(private nodeService:NodeService) {}
    node: Node;
    ngOnInit(): void {
        this.nodeService.getNode(path)
            .subscribe(
                node => {
                    this.nodeService.addNode(node);
                },
                err => {
                    console.log(err);
                }
            );
    }
}

export class ChildDisplay implements OnInit{
    constructor(nodeService:NodeService) {
      nodeService.node$.subscribe(n => this.node = n);
    }
}