angular - 单击后显示组件($event)Angular 4

Question

我正在尝试在触发另一个组件的单击按钮上创建一个事件，如果您再次单击它会减少组件(显示组件的一部分始终可见)。我知道这可以通过 [ngClass]='hidden' 和同一组件中的所有内容来完成，但我不确定它是否是模块化方面的最佳方式。提前致谢

这是我的 html:

<div class="daydetail">
     <h1>Detail of the day</h1>
     <button type="button" label="Click"(click)="display('my-displaychild')"></button>
     <div>{{my-displaychild}}</div>
</div> 

这是我的组件:

import { DisplayChildComponent } from './displaychild.component';

export class AppliV2Component   { 


    display(vid:DisplayChildComponent) {
           console.log(DisplayChildComponent);
    }


 }

Answer 1

我认为您应该使用 *ngIf 来保持简单，您可以将 bool 值传递给子组件以使用 @Input< 仅隐藏您想要的部分装饰器

1.父HTML

<div class="daydetail">
     <h1>Detail of the day</h1>
     <button type="button" label="Click" (click)="toggleChild()"></button>
     <div>
         <child-component [showMePartially]="showVar"></child-component>
     </div>
</div>

2.父组件

export class AppliV2Component {
    showVar: boolean = true;

    toggleChild(){
        this.showVar = !this.showVar;
    }
 }

3.子组件

export class ChildComponent {
    @Input() showMePartially: boolean;

    // don't forget to import Input from '@angular/core'
}

4.子HTML

<div>
    <h1> this part is always visible</h1>
</div>

<div *ngIf="showMePartially">
    <h1> this part will be toggled by the parent component button</h1>
</div>