在我的父组件中，我使用<router-outlet>可以很好地显示子html。
如何允许孩子指定父组件的其他部分？
这是我尝试过的方法，但是所有内容都只在router-outlet占位符中呈现。
父组件：
<header>
...
<div #myheader></div>
</header>
<router-outlet></router-outlet>
子组件：
<div #myheader> [Some HTML to be shown inside #myheader placeholder in parent] </div>
<div> [Rest of my html to be shown under router-outlet in parent</div>
我需要执行此操作的原因是因为子组件的两边都有很多填充，但是标头运行全宽，所以它不像在每个子组件中指定子相对子标头那样简单。
考虑构建具有页面标题属性的服务。
然后，ParentComponent可以访问服务以绑定到该属性。
每个ChildComponent都可以根据需要设置属性。
我在这里有一个示例服务：https : //blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/
代码看起来像这样：
服务
import { Injectable } from '@angular/core';
@Injectable()
export class HeaderService {
headerText: string;
}
父组件
export class ParentComponent {
get header():string {
return this.headerService.headerText;
}
constructor(public headerService: HeaderService) { }
}
父HTML
<header>
...
<div>{{ header }}</div>
</header>
<router-outlet></router-outlet>
子组件
export class ChildComponent {
constructor(public headerService: HeaderService) {
this.headerService.headerText = ''; // <- Header text here
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句