search

kittencup / angular2-ama-cn

angular2 随便问
691 stars 101 forks source link

Angular 2 中怎么在一个组件中使用多个ng-content #17

Open kittencup opened 8 years ago

kittencup commented 8 years ago

在一个组件中使用单个ng-content在该 https://github.com/kittencup/angular2-ama-cn/issues/16 中已解决

现在想让<div>hello</div>在第一个ng-content,<div>world</div>在第二个ng-content

@Component({
    selector: 'multi-content',
    directives: [],
    template: `
        <ng-content></ng-content>
        <ng-content></ng-content>
    `
})
export class MultiContent {

}

@Component({
    selector: 'app',
    directives:[MultiContent],
    template: `
        <multi-content>
            <div>hello</div>
            <div>world</div>
        </multi-content>
    `,
})
export class App {

}
kittencup commented 8 years ago

ng-content 可以指定 select 属性 语法为 select="selector",selector为选择器

@Component({
    selector: 'multi-content',
    directives: [],
    template: `
        <ng-content select="[header]"></ng-content>
        <ng-content select=".body"></ng-content>
    `
})
export class MultiContent {

}

@Component({
    selector: 'app',
    directives:[MultiContent],
    template: `
        <multi-content>
            <div header>hello</div>
            <div class="body">world</div>
        </multi-content>
    `,
})
export class App {

}
luozt commented 7 years ago

赞一个！终于找到了模块嵌套的方法了