使用路由器插座时使用 Input 属性将值从一个组件传递到另一个组件

Question

我有我的父组件，其中定义为在路由更改时显示其他组件（子组件），我想将一个值从 parentComp 传递给 childComp，如果我们不这样做，通常我们会包含选择器来代替 router-outlet t 使用路由并使用 @Input 属性传递。 使用路由时如何实现同样的效果

父组件

@Component({
    selector : 'parent',
    template : `<h1>Home</h1>
            <router-outlet test1="test"></router-outlet>
    `,
})
export class parentComp{
    test = "testing";
}

子组件

@Component({
    selector : 'child',
    template : `<h2>Home</h2>
    `,
})
export class childComp implements onChanges, onInit{
    @Input() test1;
    ngOnChanges(){
        console.log(this.test1);
    }
ngOnInit(){
            console.log(this.test1);
}
}

我想从父组件到子组件中获取 test1 的值，并使用@Input 属性在控制台中打印。

在控制台中打印值时，我将 test1 的值设为未定义

Answer 1

您不能为router-outlet 定义@Input() 变量。

相反，您可以选择以下选项

• 使用路由参数
• 使用查询参数
• 共享数据的共享服务
• 使用 redux 工具进行状态管理