#javascript #angular #angular-ng-if
#javascript #angular #angular-ng-if
Вопрос:
Я пытаюсь показать / скрыть элемент в родительском компоненте, когда пользователь нажимает на кнопку из дочернего компонента. Я не уверен, делаю ли я что-то неправильно или, может быть, у меня совершенно неправильный подход
Родительский компонент
<div *ngIf="show">Hello World</div>
<div *ngIf="!show">Goodbye World</div>
Дочерний компонент
<button (click)="showHello()">
<i class="fas fa-plus"></i>
</button>
Дочерний файл Component .ts
show: boolean = false;
showHello() {
this.show = !this.show;
console.log('show', this.show);
}
Ответ №1:
родительский:
<hello #hello></hello>
<p>
{{hello.show}}
</p>
дочерний:
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `<button (click)="showHello()">
Show
</button>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
show: boolean = false;
showHello() {
this.show = !this.show;
console.log('show', this.show);
}
}