У меня вопрос по angular2. Я создаю некоторые компоненты и хочу иметь что-то вроде этого:
Это мой класс DogComponent:
@Component({
selector: "dog",
template: "dog.template.html"
})
class DogComponent
{
@Input() image: string;
}
И шаблон в dog.template.html:
<div>
<!-- Content of <top> should go here -->
<img class="after" src="dogs/{{image}}" />
<!-- Content of <bottom> should go here -->
</div>
Когда я использую DogComponent, он должен создать тег img с переданным src, а также просмотреть другие части HTML до и после изображения.
Итак, в конце концов, если я напишу этот код:
<dog image="garry.png">
<top>
<h1>This is Garry!</h1>
</top>
<bottom>
<span>He is my favorite dog!</span>
</bottom>
</dog>
это должно быть отнесено к этому:
<dog>
<div>
<h1>This is Garry!</h1>
<img src="dog.png" />
<span>He is my favorite dog!</span>
</div>
</dog>
У кого-нибудь есть ответ на мой вопрос?
Было бы здорово!
Изменить:
Спасибо за советы, теперь я обновил свои фрагменты и добавил DogListComponent
. Последний фрагмент (результат браузера) следует просмотреть, если я использую тег dog-list
где-то в своем приложении. Надеюсь, теперь стало немного понятнее.
dog.component.ts
@Component({
selector: "dog",
templateUrl: "dog.template.html"
})
class DogComponent
{
@Input() image: string;
}
dog.template.html
<div>
<!-- Content of <top> should go here -->
<img class="after" src="dogs/{{image}}" />
<!-- Content of <bottom> should go here -->
</div>
dog_list.component.ts
@Component({
selector: "dog-list",
templateUrl: "dog-list.template.html"
})
class DogListComponent
{
}
список собак.template.html
<dog image="garry.png">
<top>
<h1>This is Garry!</h1>
</top>
<bottom>
<span>He is my favorite dog!</span>
</bottom>
</dog>
<dog image="linda.png">
<top>
<h1>My little Linda :)</h1>
</top>
<bottom>
<span>She is my cutest dog!</span>
</bottom>
</dog>
<dog image="rex.png">
<top>
<h1>And here is Rex!</h1>
</top>
<bottom>
<span>DANGEROUS!</span>
</bottom>
</dog>
Результат браузера:
<dog-list>
<dog image="garry.png">
<top>
<h1>This is Garry!</h1>
</top>
<bottom>
<span>He is my favorite dog!</span>
</bottom>
</dog>
<dog image="linda.png">
<top>
<h1>My little Linda :)</h1>
</top>
<bottom>
<span>She is my cutest dog!</span>
</bottom>
</dog>
<dog image="rex.png">
<top>
<h1>And here is Rex!</h1>
</top>
<bottom>
<span>DANGEROUS!</span>
</bottom>
</dog>
<dog-list>
<!-- Content of <top> should go here -->
вdog.template.html
заменялся тегом<top><h1>This is Garry!</h1></top>
, указанным вdog-list.template.html
. - person be-ndee   schedule 21.01.2017