This seems to be a perfect fit for content transclusion.
Angular 2 comes with a component called ng-content that allows you to insert external html/components as the content of your component.
You just need to use in the place where you want the content to be displayed in your component.
For example:
import {Component} from 'angular2/core'
@Component({
selector: 'holder',
providers: [],
template: `
<div>
<h2> Here's the content I got </h2>
<ng-content></ng-content>
</div>
`,
directives: []
})
export class Holder {
constructor() {
}
}
And you can specify the content you want injected from the component's parent this way:
import {Component} from 'angular2/core';
import {Holder} from './holder';
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<holder>
<div>yeey transcluded content {{name}}</div>
</holder>
</div>
`,
directives: [Holder]
})
export class App {
constructor() {
this.name = 'Angular2'
}
}
You can see working example here.
In your case you can make the list row/item a component that can accept some content to display.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…