Angular 2 嵌套组件中的调用方法

Question

我找到了一些关于此的旧答案，但他们使用的方法不再有效。我有一个 header 组件

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx'; 

import { AuthenticationService } from '../_services/Authentication.Service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  loading = false;
  error = '';
  isLoggedIn = false;
  showMessageWindow = false;
  messageType: string = "";
  messageText: string = "";
  public currentUser: any = null;

  constructor(private _auth: AuthenticationService, private router: Router) { }

  ngOnInit() {
    if(this._auth.isLoggedIn()) {
      this.isLoggedIn = true;
    }
    else {
      this._auth.logout();
      this.isLoggedIn = false;
      this.router.navigate(['/']);
    }
  }

  showMessage(message: string, type: string) {
    this.messageText = message;
    this.messageType = type;
    this.showMessageWindow = true;
  }
}

它非常基本，根据是否登录以及谁登录来显示和管理可以看到的导航。我在 header 组件中内置了一个 warning/alert。并非所有页面都使用 header，因此我将其导入到使用它的组件中，并通过将 <app-header></app-header> 放在顶部来将其放入组件模板中。

Here is a component that uses the header.
import { Component, OnInit } from '@angular/core';
import { HeaderComponent } from '../header/Header.Component';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-census',
  templateUrl: './census.component.html',
  styleUrls: ['./census.component.css']
})
export class CensusComponent implements OnInit {

  constructor( private router: Router, private activatedRoute: ActivatedRoute) { }

  ngOnInit() {

  }

}

我希望能够将一个方法放入此组件中，该方法从 header 组件调用 showMessage()。我尝试了几种不同的方法，但收效甚微。我最大的问题是如何引用嵌入式组件。我查看了文档，但他们总是在组件中直接使用模板，而不使用单独的 html 文件。

如果我尝试添加

  @ViewChild(HeaderComponent)
  private header: HeaderComponent;

进入我的 CensusComponent 我收到警告：

WARNING in ./src/app/header/Header.Component.ts
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

Answer 1

使用 ViewChild 装饰器工厂

// Here is a component that uses the header.

import {ViewChild} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {HeaderComponent} from '../header/Header.Component';
import {Router, ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-census',
  templateUrl: './census.component.html',
  styleUrls: ['./census.component.css']
})
export class CensusComponent implements OnInit {

  // The argument `HeaderComponent` tells the framework to bind to the child 
  // component whose constructor function is `HeaderComponent`
  @ViewChild(HeaderComponent) header: HeaderComponent;

  constructor(readonly router: Router, readonly activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.header.showMessage('an error occurred!', 'error');
  }
}

您收到的错误：

WARNING in ./src/app/header/Header.Component.ts
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

完全正交。

具体来说，这意味着当您导入 header/Header.component 以在您的 NgModule 中注册它时，您导入了使用不同大小写的模块说明符的组件。例如。 header/header.component

这是一个您可以而且应该解决的问题。只要确保所有导入都使用相同的大小写即可。

我建议在任何地方都使用小写的文件名和小写的模块说明符。一个简单的搜索和替换就可以搞定。

Answer 2

您是否考虑过尝试使用 ViewChild？这应该允许您获取对 header 组件的引用并调用 showMessage() 方法。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

Angular 2 嵌套组件中的调用方法

Angular 2 call method in nested component

typescript

angular2-components

angular