Чтобы получить чистый и СУХОЙ ионный проект, я просто хотел, чтобы мой код navbar был написан в одном месте, вместо того, чтобы писать весь HTML на каждой ионной странице.
Для этой цели я создалугловой компонент (не ионная страница) с именем navbar, и я внедряю его в свои страницы.Чтобы сохранить чистый макет без каких-либо дополнительных вещей в DOM, я создал компонент с обозначением в скобках, например:
@Component({
// brackets let the selector be used as a property instead of a component
selector: '[navbar]',
templateUrl: 'navbar.html',
})
export class NavbarComponent {
@Input() title: string = 'default title';
constructor() {}
}
Затем я пытаюсь внедрить компонент в страницы следующим образом:
<ng-container navbar title="My good title"></ng-container>
Цель состоит в том, чтобы не создавать никаких дополнительных узлов в DOM для поддержания чистого макета.Но это НЕ РАБОТАЕТ, так как я получаю пустую страницу без какой-либо конкретной ошибки в консоли.
Для сравнения
<div navbar title="My good title"></div>
работает, но мой макет не работает (запускается ионное содержимоес самой верхней части моей страницы, скрываемой navbar)
Есть идеи?Спасибо.
// navbar.html код
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
</ion-header>
ionic (Ionic CLI): 4.1.2 Ionic Framework: ionic-angular 3.9.2 @ ionic / app-scripts: 3.1.9