Question

我有这个HTML文件，我在单击按钮时使用选择器标记调用该文件。

单击按钮时，将触发我的TS中的此功能，其中变量将设置为TRUE。如果是TRUE，则我的HTML中的*ngIf将执行显示其他HTML页面的工作。

OpenMyNotes(){ this.MyNotesOpened = true; }

在我的HTML中设置如下：

<page-open-mynotes *ngIf="MyNotesOpened == true"></page-open-mynotes>

在我的page-open-mynotes中会有一个解雇按钮：

<button ion-button (click)="dismissMyNotes()">
   <ion-icon name="close" class="text-white"></ion-icon>
</button>

问题是，我在点击关闭按钮时尝试从我的页面中删除page-open-mynotes但是无法通过使用父页面中的相同变量this.MyNotesOpened来设置它回到FALSE。是否可以对两个页面执行共享变量？

Answer 1

可以使用EventEmitter。这样做。

在您的父组件中实现一个方法。例如，调用它onDismissNotes()。无论何时调用，此方法都会将this.MyNotesOpened更改为false。

onDismissNotes(event: any){
     this.MyNotesOpened = false;
}

此方法由EventEmitter从子组件page-open-mynotes调用。

import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Output() private dismissMe = new EventEmitter<string>();


private dismissMyNotes(): void {
   // send a unique value, every time you fire the emitter.
   // Otherwise it may happen, that the Emitter fires only once.
   // And as the value doesn't matter in the parent component
   // UTC-time is the best you can choose.
   this.dismissMe.emit(new Date().getTime().toString());
}

此方法由子组件的HTML模板调用

<button ion-button (click)="dismissMyNotes()">
   <ion-icon name="close" class="text-white"></ion-icon>
</button>

在您的父组件的HTML中，您可以执行以下操作

<page-open-mynotes *ngIf="MyNotesOpened == true" (dismissMe)="onDismissNotes($event)"></page-open-mynotes>

现在，只要您点击子组件中的dismissMyNotes()，就会通知父组件并将this.MyNotesOpened设置为false。这会触发*ngIf并且您的子组件被解雇。

在Angular 5中删除选择器标记

1 个答案: