获取Angular中不相关组件的属性

Question

如果它们不相关，如何获得另一个组件的属性。我知道共享服务，还有其他方法吗？

Answer 1

您可以在RxJ中使用Observables

//message.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class MessageService {

  private messageCommand = new Subject<string>();
  messageCommand$ = this.messageCommand.asObservable();

  invokeMessage(msg: string) {
    this.messageCommand.next(msg);
  }
}

//component-one.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../services/message.service';

@Component({
  selector: 'app-component-one',
  templateUrl: './component-one.component.html',
  styleUrls: ['./component-one.component.css']
})
export class ComponentOneComponent implements OnInit {

  constructor(private messageService: MessageService) { }

  ngOnInit() {
  }

  yourActionMethod() {
    this.messageService.invokeMessage('This is from component one');
  }
}

//component-two.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MessageService } from '../services/message.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component-two',
  templateUrl: './component-two.component.html',
  styleUrls: ['./component-two.component.css']
})
export class ComponentTwoComponent implements OnInit, OnDestroy {

  messageSubscription: Subscription;
  message: string;

  constructor(private messageService: MessageService) { }

  ngOnInit() {
    this.subscribeToMessageEvents();
  }

  ngOnDestroy(): void {
    this.messageSubscription.unsubscribe();
  }

  subscribeToMessageEvents() {
    this.messageSubscription = this.messageService.messageCommand$.subscribe(
      (msg: string) => {
        this.message = msg;
      }
    );
  }

}

在这里，我使用了一个包含可观察的字符串类型的服务类。

然后从组件一开始，使用我们的消息服务中的invokeMessage方法发布一条消息。

需要接收消息的组件，在我们的示例中，第二个组件应订阅消息服务中的messsageCommand $。

  

在销毁组件时，请务必取消订阅。

Answer 2

嗨，@ Aspram，您应该创建输出或共享服务。

我会告诉你

  

带有@output（）

header.component.ts

export class Header implements OnInit {

  @Output() onheaderInit: EventEmitter<Header> = new EventEmitter<Header>();

  constructor() { }

  ngOnInit() {
    this.onheaderInit.emit(this);
  }
}

  

那么你就可以食用

<header (onheaderInit)="getTheClass($event)">

  

第二种方法使用主题

sharedService.ts

import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {

  public onheaderInit: Subject<any> = new Subject();

  constructor() { }

}

header.component.ts

export class Header implements OnInit {

  constructor(private _sharedService: SharedService) { }

  ngOnInit() {
    this._sharedService.onheaderInit.next(this);
  }
}

  

那么你就可以食用

this._sharedService.onheaderInit.subscribe( res => {
  console.log(res)
});