如何在组件之间获取和设置/访问和修改全局变量-Java 学习之路

我是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＆Comp1.ts - （这些是基于Angular Routing配置的，无论哪个视图加载它都会设置'Grid'模式或'List'模式）

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



}

然而，这一切都编译得很好没有错误，但我没有看到'网格'绑定到模板的绑定（插值） . 我想我在渲染模板后设置变量，即使我在ngOnInit中设置它 . 我希望能够从其他组件访问，检查和设置此变量 . 我该怎么做呢？谢谢

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

}

回复于 2024-05-03T16:13:21+08:00

如何在组件之间获取和设置/访问和修改全局变量

1 回答

相关问题