将数据传递到“路由器出口".子组件 [英] Passing data into "router-outlet" child components

问题描述

我有一个去服务器的父组件并获取一个对象:

I've got a parent component that goes to the server and fetches an object:

// 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);
                }
            );
    }

在以下几个子显示之一中:

And in one of several childdren display:

export class ChildDisplay implements OnInit{

    @Input()
    node: Node;

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

}

似乎我不能只将数据注入到router-outlet中.看来我在Web控制台中收到错误:

It doesn't seem I can just inject data into the router-outlet. It looks like I get the error in the web console:

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

这在一定程度上是合理的，但是我将如何执行以下操作:

This somewhat makes sense, but how would I do the following:

1. 从父级服务器中获取服务器的节点"数据 组件?
2. 将我从服务器检索到的数据传递到子路由器出口吗?

1. Grab the "node" data from the server, from within the parent component?
2. Pass the data I have retrieved from the server into the child router-outlet?

似乎router-outlets的工作方式不同.

推荐答案

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

只是无效的.路由器添加的组件作为同级添加到<router-outlet>中，而不替换它.

is just invalid. The component added by the router is added as sibling to <router-outlet> and does not replace it.

另请参见 https://angular. io/guide/component-interaction#父项和子项通过服务进行通信

@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);
    }
}

这篇关于将数据传递到“路由器出口".子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！