중첩 된 구성 요소의 각도 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 파일을 사용하지 않습니다.

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

:

내 CensusComponent에

@ViewChild(HeaderComponent) 
    private header: HeaderComponent; 

를 추가하려고하면 내가 경고를

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