Загрузка заголовка и нижнего колонтитула с использованием HTML-адресов в Angular

F11 спросил: 13 июня 2018 в 11:29 в: angular

Я загружал верхний и нижний колонтитулы, используя Внешние URL-адреса Html с помощью JQuery, например

$("#dv_header").load(headerUrl);

Теперь, как добиться этого в Angular?

1 ответ

Moshe ответил: 13 июня 2018 в 12:54

Для углового 2 и выше. Создайте две компоненты с помощью углового CLI:

ng g c header
ng g c footer

Затем в вашем приложении app.component.ts:

<app-header>
<router-outlet>
<app-footer>

В HTML-файле заголовка и нижнего колонтитула вы можете использовать iFrame для визуализации внешнего HTML или в вашем header/footer.component.ts replace:

templateUrl: './footer.component.html' (or './header.component.html')

с:

templateUrl: (YOUR URL HERE)

в декодере @Component({})

F11 ответил: 14 июня 2018 в 01:59
url - внешний html url, я написал его как @Component ({selector: 'app-header', // templateUrl: './header.component.html', templateUrl: 'abc.html' ;, styleUrls: [' ./header.component.css ']}) и я получаю ошибку Не удалось скомпилировать. ./src/app/header/header.component.ts Модуль не найден: Ошибка: невозможно разрешить 'abc.html'; в 'C: \ Users \ ng_projects \ src \ app \ header
Moshe ответил: 14 июня 2018 в 02:25
поцарапать внешний url в templateUrl, который не работает. измените его на ./header.component.html, и в этом файле замените <p>app-header works!</p> на <iframe src="externalUrl.com"></iframe>
F11 ответил: 14 июня 2018 в 06:03
iFrames не будет работать в пограничном браузере
Moshe ответил: 16 июня 2018 в 11:20
следуйте этому руководству: arka.com/blog/...

Дополнительное видео по вопросу: Загрузка заголовка и нижнего колонтитула с использованием HTML-адресов в Angular

Работа с колонтитулами Word

Добавление нижнего колонтитула в письма организации

MS Word Два колонтитула, объединение