У меня есть вопрос для angular2. Я создаю некоторые компоненты и хотят иметь что-то вроде этого:Angular2: Как показать внутренний HTML компонентных тегов внутри компонента?
Это мой 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>
ли кто-то есть ответ на мой вопрос?
Было бы здорово!
Edit:
Спасибо за советы, так что теперь я обновил свои фрагменты и добавил 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
{
}
собаки list.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>
результат
Browser:
<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>
Вы хотите отобразить его в редакторе/IDE, который вы используете? Или через DOM, который он делает, если вы его осмотрите. Также шаблон templateUrl не шаблон – Katana24
Он должен отображаться в скомпилированном/визуализированном DOM при запуске приложения. Я пытаюсь достичь, что комментарий ' должен идти здесь ->' в 'dog.template.html' заменяется тегом' 'указано в' dog-list.template.html'. –
Это Гарри!