Удаление тега селектора в Angular 5 - PullRequest
Новая
       19

Удаление тега селектора в Angular 5

0 голосов
/ 07 июня 2018

У меня есть этот HTML-файл, который я вызвал с помощью тега селектора при нажатии кнопки.

Эта функция в моем TS будет вызвана при нажатии кнопки, когда переменная будет установлена ​​как TRUE.Если это TRUE, то *ngIf в моем HTML сделает всю работу по отображению другой 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.Можно ли сделать переменную общего доступа для обеих страниц?

1 Ответ

0 голосов
/ 07 июня 2018

Это возможно при использовании 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 и ваш дочерний компонент удаляется.

...