Question

我有一个问题，我想在组件标题中使用此菜单。我在主要组件中有不同的div，我想隐藏/显示在右侧菜单按钮上。但是，当我拆分我的代码时，这并不起作用，只有当我在同一个组件中时它才有效。

<ul>
<li><a (click)="ShowHome()" class="active" href="#home">Home</a></li>
<li><a (click)="ShowAboutme()" href="#news">About me</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>

我想要的菜单在我的标题中。

 <div>
  <div class="box" *ngIf="showHome">
      <p>home 1</p>
      <p>home 2</p>
  </div>
</div>

当我按回家的时候，我希望显示div。

<div>
  <div class="box" *ngIf="showAboutme">
    <p>about me 1</p>
    <p>about me 2</p>
  </div>
</div>

另一个不同按钮的div。

showHome:boolean;
showAboutme:boolean;
ShowHome(){
this.showAboutme = false;
this.showHome = true;
}
ShowAboutme(){
this.showHome = false;
this.showAboutme = true;
}

如果我想将代码拆分为2个不同的组件，那么这就是我不知道放在哪里的代码。当我把它放在header.component.ts中时，如果我在该组件中添加所有html代码，它就可以工作。

非常欢迎任何帮助：）

Answer 1

当您将代码拆分为不同的组件时，应使用observable来支持两个不同组件之间的通信。

一个组件中对值的任何更改都可以通过observable提供给另一个组件。这是实现同样目标的方法。

创建共享服务。我们称之为组件服务

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class AppService {
private titleSubject = new Subject<any>();
private loaderSubjectt = new Subject<any>();

constructor() { }



setTitle(title: string) {
    this.titleSubject.next({ title: title });
}

getTitle(): Observable<any> {
    return this.titleSubject.asObservable();
}

show() {
    this.loaderSubjectt.next({ state: true });
}

hide() {
    this.loaderSubjectt.next({ state: false });
}

}

现在在组件中导入此共享服务并将其注入您的构造函数，如此

constructor(private component: componentService) {}

像这样设置值

component.show()
component.hide()

听取这个变量的变化

this.appService.show().subscribe(res => {
                this.reportTitle = res.state;
            });

阅读你可以做的一些文字

this.appService.getTitle().subscribe(res => {
                this.title = res.title;
            });

Angular帮助在多个组件中使用代码

1 个答案: