Question

我刚开始学习Angular 2，我对组件有疑问。我创建了一个名为＆＃34; dropdownComponent＆＃34;的组件。生成下拉组件。但是当我多次使用这个组件时，我不知道如何区分一个组件的实例。下拉id =＆＃39; 1＆＃39;＆gt;下拉id =＆＃39; 2＆＃39;＆gt; ; 如何为每个实例设置id之类的东西，并通过id查找每个组件，这样我就可以分别发送数据或调用每个组件的功能。感谢

     this this my component
    import { Component, Input, OnInit } from '@angular/core';
    import {SelectComponent} from 'ng2-select';

    import { Service } from '../../../service/index';

    interface singleselectitem {
      Value: string;
    }

   @Component({
selector: 'singleselect',
   templateUrl: 'app/home/select/select/singleselect.html',
   providers: [SelectComponent]
 })
 export class singleselectComponent {

@Input() calleditems: string;
public items: Array<string> = [];
//items: singleselectitem[] = [];
selecteditem: singleselectitem;
constructor(private service: Service, private select: SelectComponent) {
    this.select.items = [];
}

ngOnInit() {
    if (this.calleditems == 'ArchiveList')
        this.GetArchiveList();
}

GetArchiveList() {
    this.service.callservice('get', 'basic/getArchiveList', '').subscribe(
        data => {
            for (var i = 0; i < data.length; i++) {
                this.items.push(data[i].Value);
            }
        },
        err => {

        });
}

private value: any = {};
private _disabledV: string = '0';
private disabled: boolean = false;

private get disabledV(): string {
    return this._disabledV;
}

private set disabledV(value: string) {
    this._disabledV = value;
    this.disabled = this._disabledV === '1';
}

public selected(value: any): void {
    console.log('Selected value is: ', value);
}

public removed(value: any): void {
    console.log('Removed value is: ', value);
}

public typed(value: any): void {
    console.log('New search input: ', value);
}

public refreshValue(value: any): void {
    this.value = value;
}
}



    //template of my component
   <div style="width: 300px; margin-bottom: 20px;">
<ng-select [allowClear]="true"
           [items]="items"

           (data)="refreshValue($event)"
           (selected)="selected($event)"
           (removed)="removed($event)"
           (typed)="typed($event)"
           >
</ng-select>

      //host component
     import { Component, OnInit } from '@angular/core';
     import { Router } from '@angular/router';
     import {SelectComponent} from 'ng2-select';

      import { CarouselComponent } from '../home/slider/index';
      import { Service } from '../service/index';
       import {singleselectComponent} from './select/select/singleselect';

       @Component({
moduleId: module.id,
templateUrl: './home.component.html',
providers: [CarouselComponent, singleselectComponent, SelectComponent] // means we have used csscarousel tags in home.html
       })



       export class HomeComponent implements OnInit {

private ArchiveList: any;

constructor(private service: Service, private router: Router, private singleselect: singleselectComponent) { }

ngOnInit() {
    if (this.service.GetToken() == null)
        this.router.navigate(['/login']);
}
    }


       template of host component
       <div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p><a [routerLink]="['/login']">Logout</a></p>
      </div>
      <singleselect [calleditems]="'ArchiveList'"></singleselect>
      <singleselect [calleditems]="'ArchiveList1'"></singleselect>
      <div class="wrapper">
           <css-carousel></css-carousel>
      </div>

Answer 1

我认为你需要ViewChild注释。您可以在您的Html页面中为每个下拉组件添加一个ID，如下所示：

header

然后在你的component.ts文件中：

<drop-down #countriesDropDown></drop-down>
<drop-down #citiesDropDown></drop-down>

现在您可以分别使用DropDown组件的公共方法，如：

export class HomeComponent implements OnInit {
    @ViewChild("countriesDropDown")
    contriesDp: dropdownComponent;

    @ViewChild("citiesDropDown")
    citiesDp: dropdownComponent;
}

在angular2中区分相同组件的实例

1 个答案: