嵌套組件中的角2調用方法

Question

我發現了一些舊的答案，但它們使用的方法不再有效。我有一個頭組件

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; 
    } 
} 

這是很基本的，表演和所管理內容的導航可以根據是否和誰登錄可以看到，我有一個內建在頭組件的警告/警報。並非所有頁面都使用標題，因此我將它導入使用它的組件，並將<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() { 

    } 

} 

我希望能夠把一個方法到此組件，使得從頭部組件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？這應該允許您獲取對頭部組件的引用並調用showMessage（）方法。

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