我找到了一些关于此的旧答案,但他们使用的方法不再有效。我有一个标题组件
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()
来自 header 组件。我尝试了几种不同的方法,但收效甚微。我最大的问题是如何引用嵌入式组件。我查看了文档,但他们总是在组件中直接使用模板,而不使用单独的 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:
最佳答案
使用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
这是一个您可以而且应该解决的问题。只需确保所有导入使用相同的大小写即可。
我建议在任何地方都使用小写的文件名和小写的模块说明符。一个简单的搜索和替换就可以搞定。
关于嵌套组件中的 Angular 2 调用方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43771368/