Question

我刚刚开始学习angular2并得到了这种情况，在页面上有一个下拉列表并且每次调用它都会改变它的内容，但是结构是相同的（这就是为什么我将这些设置为一个组件）它不是镜头列表所以喜欢在模板上使用templateUrl。

<div class="dropdown">
 <div class="group" *ngFor...>
  <h4 class="title" *ngIf...></h4>
  <ul> 
   <li *ngFor...> 
    <a></a> 
   </li>
  </ul>
 </div>
</div>

无论如何从父母或调用它的组件传递其templateUrl？非常感谢我有一个地方回答这些问题。谢谢。

Answer 1

请注意，为了简单起见，我使用template属性而不是templateUrl。您可以将子组件的HTML放入其自己的模板文件中。这里的想法是你可以在其父项中使用子项的选择器，并使用输入绑定将其父项的属性绑定到它。

您将要将选择器拖放到父组件中，并使用输入绑定将父级属性绑定到子组件。

父组件

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

@Component({
    moduleId: module.id,
    selector: 'app',
    template: `
        <my-dropdown [foos]="foos" [bar]="bar"></my-dropdown>
    `
})
export class AppComponent {
    foos: string[];
    bar: boolean;

}

子组件

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

@Component({
    moduleId: module.id,
    selector: 'my-dropdown',
    template: `
        <div class="dropdown">
            <div class="group" *ngFor="let foo of foos">
                <h4 class="title" *ngIf="bar === true">
                    <ul> 
                        <li *ngFor="let foo of foos"> 
                            <a></a> 
                        </li>
                    </ul>
            </div>
        </div>
    `
})
export class AppComponent {
    @Input() foos: string[];
    @Input() bar: boolean;

}

有关official docs

中组件互动的更多信息

Answer 2

//our Dropdown app component
import {Component, NgModule, EventEmitter, OnInit , Output, Input} from '@angular/core'

@Component({
  selector: 'custom-dropdown',
  template: `
    <div>
      <ul class="dropdown-menu">
           <li *ngFor="let value of dropdownConfiguration" 
                (click)="selectedValue(value)">
                  {{value.name}}
           </li>
      </ul>
    </div>
  `,
})
export class DropdownComponent {
  @Input() dropdownConfiguration : any[];
  @Output() selectedDropDownValue:EventEmitter<any> = new EventEmitter<any>();
  name:string;
  constructor() {
    this.name = 'Angular2';
  }
  selectedValue(value:any){
    this.selectedDropDownValue.emit(value);
  }
}

您可以将父组件中的自定义下拉列表用作

 <custom-dropdown (selectedDropDownValue)="changedValue($event)"
             [dropdownConfiguration]="dropdownConfig"   >

组件代码看起来像

dropdownConfig:any=[];
  constructor() {
    this.name = 'Angular2';
    this.dropdownConfig=[{
        id:1
        name:'a'
    },{
        id:2
        name:'b'
    },{
        id:3
        name:'c'
    },
    ]

  }
  changedValue(value){
    console.log(value);
  }

<强> LIVE DEMO

如何从其父组件传递templateUrl信息？

2 个答案:

父组件

子组件