Angular: как удалить оболочку (родительский элемент), не удаляя дочерний элемент?
Я видел этот ответ, но он отвечает за jquery, а не за angular/typescript.
Мой вопрос похож на этот вопрос, но мой вопрос ищет решение для angular.
Как удалить оболочку (родительский элемент) без удаления дочернего элемента в Angular с помощью typescript или scss? (Если это возможно обоими, пожалуйста, покажите оба метода).
Например, как программно манипулировать домом ниже из
<div class = "wrapper">
<span>This is It!</span>
</div>
<div class = "button">Remove wrapper</div>
to: (После нажатия на кнопку я хочу, чтобы дом выглядел так, как показано ниже)
<span>This is It!</span>
<div class = "button">Remove wrapper</div>
РЕДАКТИРОВАТЬ: Пожалуйста, также покажите, как настроить его, чтобы он мог добавить div-оболочку обратно, когда я снова нажимаю кнопку. В основном переключение оболочки div.
*ngIf избавится от div-оболочки и его дочерних элементов, это не то решение, которое я ищу.
Это решение. Если еще!
Пожалуйста, покажите пример, чтобы я мог лучше понять.
Это то, что вы имеете в виду: Ultimatecourses.com/blog/angular-ngif-else-then?
Ответы 1
Я думаю, вы можете смоделировать, используя ng-template и два div, например
<div *ngIf = "toogle" class = "wrapper">
<ng-content *ngTemplateOutlet = "template"></ng-content>
</div>
<ng-content *ngTemplateOutlet = "!toogle?template:null"></ng-content>
<ng-template #template>
<hello name = "{{ name }}"></hello>
</ng-template>
<button (click) = "toogle=!toogle">toogle</button>
Вы смотрели *NgIf?