Question

我的app.component.html

中有以下模板

<div class="app-container">
  <app-header></app-header>
  <div class="content--wrapper">
    <router-outlet></router-outlet>
  </div>
  <app-footer></app-footer>
</div>

为简单起见，我们假设header.component.html看起来像

<ul>
  <li>el1</li>
  <li id="removable"><img src="some_icon.png"></li>
</ul>

当然，我根据所选路线加载了页面。

我想要实现的是根据我当前所处的路线显示#removable。

例如，/another-component路由将加载AnotherComponent。

我开始的方式是在@input() showElement中设置HeaderComponent变量并在模板中使用它，如：

  <li id="removable" *ngIf="showElement"><img src="some_icon.png"></li>

当然在app.component.html我会有像

这样的东西

  <app-header [showElement]="booleanValue"></app-header>

现在问题是我不知道如何从路由器插座添加的booleanValue传递AnotherComponent。

我尝试在@Output()中添加AnotherComponent，在构造函数中发出我想要的booleanValue，但AppComponent如何使用此值？

我是朝着正确的方向吗？或者还有另一种我不知道的方式吗？

Answer 1

与上面提到的@incognito一样，您可以创建一个在父组件中注册并控制它的服务。

看看这个plnkr，例如：https://plnkr.co/edit/mCgImmvlBDPCHoN61pEZ?p=preview

当您访问危机组件时，隐藏了上例中的标题。

1

//app.component.ts
import { Component, Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class HideService {
  hide: boolean = false;
}

@Component({
  selector: 'my-app',
  styleUrls: ['app/app.component.css'],
  template: `
    <h1 *ngIf="!isHidden">Hide Title on Crisis Route</h1>
    <ul>
      <li><a routerLink="/heroes" routerLinkActive="active">Heroes</a></li>
      <li><a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a></li>
    </ul>
    <router-outlet></router-outlet>
  `
  providers: [HideService]
})
export class AppComponent {

  constructor(private hideService: HideService) {}

  get isHidden() {
    return this.hideService.hide;
  }

}

2

//Crisis Component
import { Component } from '@angular/core';
import {HideService} from './app.component';

@Component({
  template: `
    Crisis Component
  `
})
export class CrisisListComponent {
  constructor(private hideService: HideService) {
    this.hideService.hide = true;
  }
}

3

//hero component
import { Component } from '@angular/core';
import {HideService} from './app.component';

@Component({
  template: `
    Hero Component
  `
})
export class HeroListComponent {

  constructor(private hideService: HideService) {
     this.hideService.hide = false;
  }

}

您也可以使用路由数据执行此操作。更多信息：https://angular.io/guide/router

{
  path: 'crisis-center',
  loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
  data: { preload: true }
},

在Angular 4中将变量从组件发送到兄弟

1 个答案: