2017-01-20 7 views
3

У меня есть вопрос для 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> 
+0

Вы хотите отобразить его в редакторе/IDE, который вы используете? Или через DOM, который он делает, если вы его осмотрите. Также шаблон templateUrl не шаблон – Katana24

+0

Он должен отображаться в скомпилированном/визуализированном DOM при запуске приложения. Я пытаюсь достичь, что комментарий ' должен идти здесь ->' в 'dog.template.html' заменяется тегом'

Это Гарри!

'указано в' dog-list.template.html'. –

ответ

6

Так Я нашел свое решение! Мне нужно использовать <ng-content>.

dog.template.html выглядит следующим образом:

<div> 
    <ng-content select="top"></ng-content> 
    <img class="after" src="dogs/{{image}}" /> 
    <ng-content select="bottom"></ng-content> 
</div> 

Тогда будет вставить указанный <top>-tags и <bottom>-tags в моих делах.

2

Посмотрите, как вы поняли роль селектора. Селектор <dog></dog> будет использоваться другими компонентами (например, AppComponent) для отображения HTML-компонента вашей собаки. Таким образом, нет смысла использовать селектор в своем HTML-компоненте.

Кроме того, если вы хотите использовать внешний файл в качестве шаблона, синтаксис templateUrl, а не template. так:

@Component({ 
selector: "dog", 
templateUrl: "dog.template.html" // make sure the path to the file is correct 

В вашем dog.template.html, просто поместите ваш HTML код:

<div> 
    <h1>This is Garry!</h1> 
    <img src="dogs/{{image}}" /> 
    <!-- the component deliver the value image (dog.png) to your template --> 
    <span>He is my favorite dog!</span> 
</div> 

Редактировать ответить на ваш обновленный код. Если я хорошо понимаю, у вас есть массив собак pictures, доступный с dog_list.component.ts. Вы используете их в своем шаблоне примерно с *ngFor="let picture of pictures". Вы не говорите, как ваши данные выглядит, но, может быть, вы можете попробовать это, если у вас есть массив отформатированный как arr = [{'topTile':'This is Garry!', 'picture': 'garry.png', 'bottomTitle':'He is my favorite dog!' }, {}, ...]

<!-- Parent component template (dog_list) --> 
    <div *ngFor="let data of arr"> 
     <top> 
      <h1>{{ data.topTitle }}</h1> <!-- This is Garry!, ... --> 
     </top> 
     <dog [image]="data.picture"></dog><!-- Bind data to children component dog with value garry.png --> 
     <bottom> 
      <span>{{ data.bottomTitle }}</span> <!-- He is my favorite dog!,... --> 
     </bottom> 
    </div> 

Более подробно, возможно, угловые шаблоны синтаксических документы могут помочь: https://angular.io/docs/ts/latest/guide/template-syntax.html

+1

Спасибо за templateUrl, это был всего лишь пример, в реальном приложении я делаю это правильно;) И я также понимаю селектор. В моем случае я пытаюсь поместить некоторые другие теги извне DogComponent (в обновленном вопросе от DogListComponent) в DogComponent. –