Question

如何使用在其他组件的组件中初始化的布尔变量？让我解释：我有一个布尔变量＆＃39; flash＆＃39;我在我的组件＆＃39; chat-threads＆＃39;。

中初始化

<div class="flash-signal">
  Signal visuel :
  <input type="radio" name="flashsignal" id="flashsignal1" checked="checked" (click)="flashSignal()">
  <label for="flashsignal1">Oui</label>
  <input type="radio" name="flashsignal" id="flashsignal2" (click)="notFlashSignal()">
  <label for="flashsignal2">Non</label>
</div>

其他代码：

export class ChatThreadsComponent implements OnInit {

flash = true;

constructor(public threadsService: ThreadsService,
          public messagesService: MessagesService,
          public boxService: BoxService) {
  this.threads = threadsService.orderedThreads;
}

ngOnInit(): void {
   this.flash = true;
}

notFlashSignal(): void {
  this.flash = false;
}

flashSignal(): void {
    this.flash = true;
}
}

我希望能够在另一个组件＆＃39; chat-window＆＃39;中读取此变量的值。为了能够显示视觉信号。

<div [ngClass]="{'notification-message-unread' : !box.thread.lastMessage.isRead && flash}">

我是否必须在我的组件中实现此变量？

编辑：

export class Box {
id: string;
thread: Thread;
discussion: Observable<Message[]>;
flash: boolean;

constructor(id?: string,
            thread?: Thread,
            messages?: Observable<Message[]>,
            flash?: boolean
) {
    this.id = id || uuid();
    this.thread = thread || null;
    this.discussion = messages;
    this.flash = flash || true;
}

}

组件：

<div [ngClass]="{'notification-message-unread' : !box.thread.lastMessage.isRead && !box.flash}">

Answer 1

当两个组件没有任何父子关系时，最好的方法是注入A和B的构造函数中的共享service。

组件A：

constructor(private sharingService: SharingService) { }

组件B：

constructor(private sharingService: SharingService) { }

<强>服务：

import { Injectable, } from '@angular/core';

@Injectable()

flash: boolean = true;

constructor() {}

您可以使用this.sharingService.flash在组件中使用它。完整参考see this.

Answer 2

使用@Input装饰器将值移动到子组件或通过服务传递它。在孩子：

@Input() name: any;

然后在父组件

中

<child [name]="farrukh"></child>

有关services的更多内容：

在几个组件中使用boolean变量

2 个答案: