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

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

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

是否仍然可以从调用它的父级或组件传递它的templateUrl？ 非常感谢我有机会回答这些问题。 多谢各位

注意，为了简单起见，我使用的是

template

属性，而不是

templateUrl

。您只需将子组件的HTML放入其自己的模板文件中即可。这里的想法是，您可以在其父对象中使用子对象的选择器，并使用输入绑定将其父对象的属性绑定到该子对象

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

父组件

从'@angular/core'导入{Component}；
@组成部分({
moduleId:module.id，
选择器：“应用程序”，
模板：`
`
})
导出类AppComponent{
foos:string[]；
条形图：布尔型；
}

子组件

从'@angular/core'导入{Component，Input}；
@组成部分({
moduleId:module.id，
选择器：“我的下拉列表”，
模板：`




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;

}

//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);
  }