Question

当我单击div时，我想初始化一个组件，这是我的代码

在html文件中

<li *ngFor="let contact of contactList">
<div (click)="anyFunctionName($event,contact.id)">
</div></li>

<component-selector></component-selector>

在ts文件中

anyFunctionName(event,id):any{
   // I will do some stuff, 
and output will be goes to another component html file, 
that will call another component <component-selector></component-selector> and display the output there
 }

有什么主意吗？

谢谢

Answer 1

您可以为组件创建一个属性。

ts文件

 anyFunctionName(event,id):any{
   this.myVar = id;
 }

html文件

<component-selector [myVar]="myVar"></component-selector>

您的组件选择器ts文件

@Input('myVar') id: number;

ngAfterViewInit() { console.log(this.id) }

您可以在Input中导入angular-core。希望有帮助。

Answer 2

添加一个布尔变量，并在组件中将其初始化为false，如下所示：

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  showthatDiv: boolean;
  ngOnInit() {

    this.showthatDiv = false;
  }

  anyFunctionName(event, id): any {
    this.showthatDiv = true;
  }

  public contactList: any[] = [{
    "id": 1,
    'name': 'name1'
  }, {
    "id": 2,
    'name': 'name2'
  }, {
    "id": 3,
    'name': 'name3'
  }];
}

，在您的html中，您只需要绑定该属性即可：

<li *ngFor="let contact of contactList">{{contact.name}}
  <div (click)="anyFunctionName($event,contact.id)"> <button>hello </button>
  </div>
</li>

<component-selector [isOpen]="showthatDiv"></component-selector>

如何在Angular5中使用click事件初始化组件

2 个答案: