typescript - Angular 2 içinde iç içe geçmiş bileşende metod çağırma

Bu konuyla ilgili bazı eski cevaplar buldum, ancak kullandıkları yöntemler artık geçerli değil. Bir üstbilgi bileşenim var

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

Oldukça basit, kimin giriş yaptığına ve giriş yapıp yapmadığına bağlı olarak hangi navigasyonun görülebileceğini gösterir ve yönetir. Başlık bileşenine yerleştirilmiş bir uyarı/alertim var. Tüm sayfalar başlığı kullanmıyor, bu yüzden onu kullanan bileşenlere aktarıyorum ve bileşen şablonunun en üstüne <app-header></app-header> koyarak ekliyorum.

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() {

  }

}

Bu bileşene, başlık bileşenindeki showMessage() metodunu çağıran bir yöntem ekleyebilmek istiyorum. Farklı birkaç yol denedim ama çok az başarı elde ettim. En büyük sorum, gömülü bileşene nasıl referans vereceğim. Belgeleri inceledim ama her zaman şablonu doğrudan bileşen içine koyuyorlar ve ayrı bir html dosyası kullanmıyorlar.

Eğer eklemeyi denersen

  @ViewChild(HeaderComponent)
  private header: HeaderComponent;

CensusComponent'ime bir uyarı geliyor:

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:

Cevap #1

ViewChild dekoratör fabrikasını kullanın

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

Aldığınız hata:

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:

tamamen ortogonaldır.

Özellikle, bunun anlamı, NgModule içinde kaydetmek için header/Header.component öğesini içe aktardığınızda, bileşeni farklı bir harf kullanımıyla (büyük/küçük harf farkıyla) bir modül belirteci kullanarak içe aktardığınızdır. Örn. header/header.component

Bu, düzeltebileceğiniz ve düzeltmeniz gereken bir sorun. Yalnızca tüm importların aynı harf kullanımıyla olduğundan emin olun.

Dosya adlarında ve modül belirleyicilerinde her yerde küçük harf kullanmanızı tavsiye ederim. Basit bir arama ve değiştirme işlemi bunu halledebilir.

Cevap #2

ViewChild kullanmayı denemeyi düşündünüz mü? Bu, başlık bileşenine bir referans almanıza ve showMessage() yöntemini çağırmanıza izin vermelidir.

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

İlgili makaleler