Я создаю веб-приложение с Angular 6 и создал шаблон.Одна часть приложения очень похожа, есть только несколько простых переменных (egtitle).Но есть также часть, которая будет сильно отличаться.
Например, есть HTML-файл Template.html
<--!some content...-->
<div>{{title}}</div>
<--!some content...-->
<div id="differentPart">
Для каждой страницы есть файл Typescript, и у него всегда есть URL-адрес файла HTML выше в качестве URL-адреса шаблона:
@Component({
selector: 'app-page1',
styleUrls: ['style.css'],
templateUrl:'Template.html'
})
export class Page1 implements OnInit, ... {
//define title
title = "Page 1"
...
}
Переменные типа 'title' я всегда могуопределить в соответствующем файле TypeScript.Но в случае каждой страницы содержимое div с идентификатором «differentPart» не одинаково.Для этого я уже пробовал много разных способов:
- Дополнительный компонент
Я создал дополнительные html-файлы для каждой страницы, с html-содержанием «differentPart».div, а также дополнительный файл Typescript.Например, в случае с файлом «Page1Diff.html» и файлом Typescript вот так:
@Component({
selector: 'app-pageDiffInhalt',
styleUrls: ['style.css'],
templateUrl:'Page1Diff.html'
})
export class Page1Component extends Page1 {
}
Затем я добавил компонент в файл шаблона следующим образом:
Содержимое появилось, но поскольку в этом HTML-содержимом используется множество атрибутов Page1, он работает неправильно, взаимодействие между двумя компонентами не является идеальным.
2.jquery
Я также пытался реализовать следующую строку в Page1.ts
$("#differentPartt").load("Page1Diff.html");
Он полностью потерял свой стиль и не работал.
Есть ли способ определить html-содержимое переменной и просто загрузить его из другого html, как если бы html-код был там.
Например,
<div id="differentPart">
{{content}}
</div>
Где я простоопределить значение содержимого, которое является содержимым Page1Diff.html, без каких-либо jquery, AJAX или дополнительных компонентов?