0
我是Angular2的新手，我正努力通过服务获取组件视图。在Angular 2中如何通过服务更新组件视图
我想在我的应用程序中使用两种不同的页面类型。一个显示带有小标志的标题，另一个不显示标题并具有更大的徽标。
我有一个应用程序头组件直接在根应用程序组件下。应用程序头组件检查服务中的数组，并使用* ngIf来更改它显示的内容。我附加到路由更改，以便检查NavigationStart并使用服务相应地更新值。
如果我点击刷新视图显示正确，但如果我在应用程序内更改路线视图应用程序头组件不会更新。当我console.log的值，我看到服务值和组件类属性正在改变，但在组件视图内没有更新。我虽然也许我有这个服务的多个实例，但我在服务上添加了一个随机数来检查，并且它都是相同的实例。
这里是模板的服务：
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/switchMap';
import { Injectable } from '@angular/core';
import { Template } from './template'
//HANDLE TEMPLATES IN AN ORGANIZED WAY
@Injectable()
export class TemplateService {
template: Template = {
showHeader: true,
imagePath: "",
name: Math.random()
};
public setShowHeader(value:boolean){
this.template.showHeader = value;
console.log(value, this.template.showHeader);//CHECK TO MAKE SURE VALUES MATCH
console.log("name", this.template.name);//CHECK TO MAKE SURE SAME INSTANCE
}
//ALLOW BACKGROUND TO BE MANUALLY SET IF DESIRED - NOT USED FOR NOW
public setImage(url){
this.template.imagePath = url;
}
//WHEREVER A ROUTE IS DEFINED A PAGE CAN CALL THIS SERVICE AND ADD SPECIFY AS THIS TEMPLATE
public noHeadRoutes = [];
public setRandomImage(){
this.template.imagePath = this.availableImagePaths[Math.floor(Math.random() * this.availableImagePaths.length)];
}
//USE THESE IF NO MANUAL IMAGE IS SET
private availableImagePaths:[string] = [
"images/home/globe.jpg",
"images/home/typing.jpg"
];
constructor() {
this.setRandomImage();
}
}这里是应用头组件：在写这篇
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { TemplateService, Template } from '../services/template';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-header',
styles: [
require('./app-header.scss')
],
template: `
{{ [(template.showHeader)] }} -- {{ template.name }}
<header class="header" *ngIf="template.showHeader">
<nav class="navbar navbar-fixed-top bg-inverse navbar-dark">
<a class="navbar-brand" Routerlink="/" RouterLinkActive="/">
<img src="../../images/logo.svg" class="app-logo" />
</a>
<ul class="nav navbar-nav pull-right">
<li class="nav-item" *ngIf="authenticated">
<a class="nav-link" (click)="signOut.emit()" href="#">
Sign out
</a>
</li>
<li class="nav-item" *ngIf="!authenticated">
<a class="nav-link" Routerlink="/login" RouterLinkActive="active">
Login
</a>
</li>
</ul>
</nav>
</header>
<!-- PUT IN A BACKGROUND IMAGE AND ADJUST SPACING -->
<div *ngIf="!template.showHeader">
<style type="text/css">
.hey{font-size:10px;}
</style>
<div class="big-logo">
<img src="images/logo.svg" />
</div>
</div>
`
})
export class AppHeaderComponent implements OnInit{
@Input() authenticated: boolean;
@Output() signOut = new EventEmitter(false);
template: Template;
constructor(private _router: Router, private _ts: TemplateService) {
this.template = _ts.template;
}
ngOnInit(){
//ALL VIEWS CAN SET A NO HEAD TEMPLATE IF NEEDED. THIS CHECKS AT NAVIGATION START AND SETS THE HEADER
this._router.events.subscribe((event) =>{
if(event instanceof NavigationStart) {
if(this._ts.noHeadRoutes.includes(event.url)){
this._ts.setShowHeader(false);
}
else{
this._ts.setShowHeader(true);
}
}
});
}
}