Question

在我的父组件中，我使用的是<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>

我需要这样做的原因是因为子组件在任一侧获得了大量填充，但是标题运行全宽，因此它不像在每个子组件中指定子相对子标题那么简单。 / p>

Answer 1

考虑构建一个具有页眉标题属性的服务。

然后，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
  } 
}

在Angular4中从子组件填充父级中的多个占位符

1 个答案: