Как сохранить предыдущее содержимое моего основного компонента в Angular 2?

В angular 1 я могу определить любой элемент как корневой элемент, и это не заменит уже написанный встроенный HTML. например, в угловом 1.

<body>
  <div ng-app=""> 
    <h1><?php echo $heading_this_page;?></h1>
    <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
    <h1>Hello {{name}}</h1>
</div>
</body>

А вот в angular 2, если я выше напишу вот так.

<body>
  <ng-app> 
    <h1><?php echo $heading_this_page;?></h1>
    <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
    <h1>Hello {{name}}</h1>
</ng-app>
</body>

и я использую ng-app в качестве селектора основного/корневого компонента, innerHTML элемента ng-app заменяется HTML-кодом компонента.

@Component({
  selector: 'ng-app',
  template:'<h1>App works</h1>";
  directives: [UsersComponent]
})

т.е. innerHtml ng-app теперь становится <h1>App works</h1> . Я хочу сохранить предыдущее содержимое ng-app.

И если это невозможно, могу ли я сделать что-то вроде ниже.

<body>
      <ng-app> 
        <h1><?php echo $heading_this_page;?></h1>
        <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
        <h1>Hello {{name}}</h1>
        <render-component-here></render-component-here>
    </ng-app>
    </body>

Где ng-app — мой основной компонент (загружается при загрузке), и он должен отображать свои данные в элементе <render-component-here></render-component-here> (а не сам по себе, заменяя предыдущий контент)


angular angular-template
person Anup_Tripathi    schedule 21.06.2017    source источник
comment
Проверьте мой обновленный ответ. Вы обнаружите кое-что интересное, что наличие ng-content в компоненте, который вы указываете в index.html, не будет работать.   -  person Mr_Perfect    schedule 21.06.2017

Ответы (2)


arrow_upward
4
arrow_downward

Добавьте <ng-content></ng-content> в свой шаблон компонента

@Component({
  selector: 'ng-app',
  template:'<div><h1>App works</h1><ng-content></ng-content></div>';
  directives: [UsersComponent]
})

Проверьте объяснение toddmotto.

Помните, что наличие текста в корневом компоненте (компонент, который загружается) не будет работать с ng-content.

<body>
    <ng-app>loading...</ng-app>
</body>

Компонент NgApp

@Component({
  selector: 'ng-app',
  template: `
    <h1>App component</h1>
    <my-apps>This is the text by ng-content</my-apps> 
    <ng-content></ng-content>

  `,
})

Наличие контента во всех других компонентах будет работать.

Проверьте работающий плункер

загрузка... в index.html всегда заменяется компонентом ng-app

Итак, вы находитесь в том же случае, даже если вы упомянете <ng-content></ng-content>, это не сработает. Если вы хотите включить это, у вас также должен быть другой родительский компонент, и в нем вы должны иметь <ng-app>, а теперь внутри <ng-app> вам нужно иметь <ng-content>

person Mr_Perfect    schedule 21.06.2017

arrow_upward
2
arrow_downward

<ng-content> это ответ на ваш запрос

Измените свой код

От:

@Component({
  selector: 'ng-app',
  template:'<h1>App works</h1>";
  directives: [UsersComponent]
})

Кому:

@Component({
  selector: 'ng-app',
  template:'<h1>App works</h1> <ng-content></ng-content>";
  directives: [UsersComponent]
})

Если вы хотите узнать больше о ng-content: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

person Vivek Doshi    schedule 21.06.2017