Question

我是Angular的新手，目前正在使用Angular 5 Cli和VS Code。我有2x组件（Comp1和Comp2）需要访问相同的变量，最终是一个字符串。此变量在第3个组件（Comp 3）视图/ HTML模板中呈现。

访问此内容的最佳方法是什么？以下示例文件：

Comp3.html

<a routerLink="/{{modeName | lowercase}}" class="mode"><span class="icon {{modeName | lowercase}}"></span><span>{{modeName}}</span></a>

Comp3.ts

import { Component } from '@angular/core';
import { LowerCasePipe } from '@angular/common';

@Component({
selector: 'pm-nav-button',
templateUrl: './comp3.component.html'
})

export class Comp3 {

constructor() {}

modeName: string;


}

Comp2.ts＆amp; Comp1.ts - （这些是基于Angular Routing配置的，无论哪个视图加载它都会设置＆＃39; Grid＆＃39;模式或＆＃39; List＆＃39;模式）

import { Component, OnInit } from '@angular/core';
import { LowerCasePipe } from '@angular/common';
import { Comp3 } from './comp3-component';

@Component({
selector: 'content-two',
templateUrl: './comp3.component.html'
})

export class Comp2 implements OnInit {

constructor(private _comp3: Comp3) {}


ngOnInit(): void {
    this._Comp3.modeName = 'Grid';
}



}

然而，这一切都很好，没有任何错误，但我没有看到＆＃39; Grid＆＃39;绑定到模板的绑定（插值）。我想我在模板渲染后设置变量，即使我在ngOnInit中设置它。我希望能够从其他组件访问，检查和设置此变量。我该怎么做呢？感谢

Answer 1

在缺少直接连接的组件（例如兄弟姐妹，孙子等）之间传递数据时，您应该使用共享服务。

您可以尝试以下代码段。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class SharedService {
  private messageSource = new BehaviorSubject<string>("list");
  currentMessage = this.messageSource.asObservable();
  constructor() { }
  changeMessage(message: string) {
    this.messageSource.next(message)

  }
}

//器Comp1

import { Component, OnInit } from '@angular/core';
import {SharedService} from '../shared.service';
@Component({
  selector: 'app-comp1',
  templateUrl: './comp1.component.html',
  styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {

   message:string;
  constructor(private data: SharedService) {

   }
  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
    console.log(this.message);
  }

}

//器Comp2

import { Component, OnInit } from '@angular/core';
import {SharedService} from '../shared.service';
@Component({
  selector: 'app-comp2',
  templateUrl: './comp2.component.html',
  styleUrls: ['./comp2.component.css']
})
export class Comp2Component implements OnInit {

    message:string;
  constructor(private data: SharedService) { }
  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
    console.log(this.message);
  }

}

如何在组件

1 个答案: