Angular2 component - render html с индексной страницы

Question

Возможно ли отредактировать html, который находится внутри app-nav, уже есть, если предоставить его в templateUrl?

@Component({ 
    selector: 'app-nav', 
    // commented out - templateUrl: './nav.component.html', 
    styleUrls: ['./nav.component.scss'] 
}) 
export class NavComponent { 
    title: string = 'This is my title'; 
} 

Html, который уже находится на странице html.

<app-nav> 
    nav works! {{ title }} 
</app-nav> 

Если я раскомментировать templateUrl то приложение-нав будет заменен нав-component.html страницы, но я не хочу этого. У меня динамический html, и я хочу это сделать.

Answer 1

Вы можете использовать встроенный вид с проекцией ngTemplateOutlet. Оберните свой контент в пределах <app-nav> тегов в <template>. Чем в вашем NavComponent найдите это TemplateRef с ContentChild и вставьте этот шаблонRef в контекст передачи шаблона компонента, который содержит вашу переменную названия. Что-то вроде этого:

@Component({ 
    selector: 'app-nav', 
    templateUrl: './nav.component.html', 
    styleUrls: ['./nav.component.scss'] 
}) 
export class NavComponent { 
    title: string = 'This is my title'; 

    @ContentChild('defaultTemplate') defaultTemplate = null // get templateRef 
} 

В nav.component.html создать выход шаблона с контекстом по отношению шаблона

<template [ngOutletContext]="{ title: title }" [ngTemplateOutlet]="defaultTemplate"></template> 

....other component content.... 

А потом вместо компонента использования:

<app-nav> 
    <template #defaultTemplate let-title="title"> 
    nav works! {{ title }} 
    </template> 
</app-nav> 

UPD:

Адрес plunk с примером

в app/some.component.ts есть ngTemplateOutlet проекция из app/app.component.tstemplate

UPD:

Хорошо, есть способ, чтобы получить исходное содержание от index.html в компонент. Вы можете использовать функцию APP_INITIALIZER, которая будет выполняться при инициализации приложения.

Вот plunk

1. См app/root-template.initializer.ts

2. В app/app.component.ts я просто заменить соответствующую недвижимость с исходным содержанием. Это немного Hacky способом и должно быть сделано путем замены шаблона в ComponentMetadata, который получен с Reflect.getMetadata:

   const annotations = Reflect.getMetadata('annotations', NavComponent) 
   const meta = annotations.find(annotation => annotation instanceof ComponentMetadata) 
   
   meta.template = meta.template.replace(
       '{{ someVarInTemplate }}', 
       'initialContentInIndex' 
   ) 
   

Таким образом, компонент шаблон будет иметь начальное содержание индекса, и он будет проанализирован угловым , Подробнее о Reflect here

Answer 2

@Yaroslav, расширяясь на своем решении:

1. Похоже (в включение угловых 1 терминов), так что в угловых 2 вы можете использовать нг-контента на внутренней составляющей.

   <div class="my-component"> 
       <ng-content></ng-content> 
   </div> 
   

2. Для интерполяции работает на внешней разметке включены через, придать элементу идентификатор и префикс интерполированное содержание с ним.

   <my-component #comp> 
       This is my transcluded content! ++{{comp.title}}++ 
   </my-component> 
   

3. Не пытайтесь transclude от index.html, не угловая компонента, так что не похоже на работу в качестве внешнего компонента. Если вы используете app.component как внешний и другой my.component как внутренний, он работает.

Вот вилка вашего plunkr с изменениями. plnkr

Для справки, я использовал отличную статью Тодда Мотто об угловом включении 2: ref here.
Угловая направляющая только неопределенно относится к ng-содержимому (со ссылкой, что 404's), поэтому я задаюсь вопросом, исчезает ли она. Может быть заменен ngComponentOutletref here