Извините, я не понял, что вы ответили на мой комментарий. Маршрутизация Angular не является вторичной, если вы не используете модули Angular, вы получите только приложение HTML / CSS / Typescript. вам нужен как минимум RouterModule для Angular, чтобы иметь возможность использовать маршрутизацию и, следовательно, делать то, что он должен делать с DOM.
Сначала:
Вы не импортируется RouterModule
решение:
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([]) // this one
]
Второй:
Используйте директиву @ViewChild, чтобы изменить свойство innerHTML и вручную привязать к событию click, поэтому измените в app.component.html с
<div id="box" [innerHTML]="shouldbedivcontent" ></div>
на
<div #box id="box"></div>
Теперь в свой app.component.ts добавьте свойство для хранения ссылки на этот элемент «коробки», чтобы вы могли позже внесите некоторые изменения в dom с ним:
@ViewChild('box') container: ElementRef;
Реализуйте AfterViewInit, этот хук - это то место, где вы действительно сможете обрабатывать свой контейнер, если вы попытаетесь использовать его, например, в OnInit вы получите undefined, потому что этого компонента html еще нет в dom.
export class AppComponent implements AfterViewInit {
и
ngAfterViewInit() {
this.container.nativeElement.innerHTML = this.shouldbedivcontent;
this.container.nativeElement.addEventListener('click',
() => this.goto('bar')
);
}
изменить shouldbedivcontent свойство y от:
'1) this is a click
<a (click)="goto("bar")">Click</a><br>
2)this is with routerlink
<a routerLink="" (click)="goto("bar")">Click</a><br>
3)This only works with href
<a href="goto/bar" title="bar">bar</a> and test'
до
'1) this is a click
<a id="link_1">Click</a><br>
2)this is with routerlink
<a [routerLink]="" (click)="goto(\'bar\')">Click</a><br>
3)This only works with href
<a href="goto/bar" title="bar">bar</a> and test'
И даже в этом случае вы все равно не получите стиль привязки по умолчанию, если не примените некоторые стили самостоятельно.
Третий
Вы не HTML дезинфицируете , что может быть опасно. подробнее здесь
МОЕ ПРЕДЛОЖЕНИЕ:
Похоже, вам предстоит много сделать и много почитать для кого-то, кто работает вместе с вами для что-то, что вы могли бы легко сделать, как в примере ниже!
Переместите свой html на app.component.html:
<div id="box">
1) this is a click
<a (click)="goto('bar')">Click</a><br>
2)this is with routerlink
<a routerLink="" (click)="goto('bar')">Click</a><br>
3)This only works with href
<a href="goto/bar" title="bar">bar</a> and test
</div>
<p>Below is actual content</p>
Вы заметите, что теперь все работает, кроме привязки без routerLink или href, потому что это не ссылка.
EDIT:
Глядя на новый stackblitz, я предлагаю изменить подход, привязка к внутреннему HTML нормально при работе с простым текстом или даже с каким-то простым html, но не лучший выбор для привязки событий или маршрутизации logi c.
Angular Renderer2 предоставляет множество методов для динамического добавления элементов в ДОМ. Имея это в таблице, вам просто нужно немного усилий, чтобы взять этот простой html, который вы получаете от вашего бэкэнда, и превратить его во что-то вроде (вставьте это свойство в свой код, чтобы протестировать его по остальной части кода, приведенного ниже):
public jsonHTML = [
{
tagName: '',
text: 'some text with click ',
attributes: {
}
},
{
tagName: 'a',
text: 'bar',
attributes: {
value: 'bar' // goto parameter
}
},
{
tagName: '',
text: ' some more text with click ',
attributes: {
}
},
{
tagName: 'a',
text: 'foo',
attributes: {
value: 'foo' // goto parameter
}
}
]
Как только он у вас есть, будет проще создавать все эти элементы динамически:
это для кода в вашем Q1:
Inject Renderer2 с private r2: Renderer2
И замените связанный с Q1 код в перехвате AfterViewInit на:
const parent = this.r2.createElement('div'); // container div to our stuff
this.jsonHTML.forEach((element) => {
const attributes = Object.keys(element.attributes);
const el = element.tagName && this.r2.createElement(element.tagName);
const text = this.r2.createText(element.text);
if (!el) { // when there's no tag to create we just create text directly into the div.
this.r2.appendChild(
parent,
text
);
} else { // otherwise we create it inside <a></a>
this.r2.appendChild(
el,
text
);
this.r2.appendChild(
parent,
el
);
}
if (attributes.length > 0) {
attributes.forEach((name) => {
if (el) {
this.r2.setAttribute(el, name, element.attributes[name]); // just the value attribute for now
if (name === 'value') {
this.r2.listen(el, 'click', () => {
this.goto(element.attributes[name]); // event binding with property "value" as parameter to navigate to
})
}
} else {
throw new Error('no html tag specified as element...');
}
})
}
})
this.r2.appendChild(this.container.nativeElement, parent); // div added to the DOM
Не требуется html дезинфицирующее средство и не нужно использовать routerLink, либо просто введите Router и перейдите по маршруту, который вы хотеть! Внесите улучшения в код, чтобы он соответствовал вашим потребностям, это должно быть по крайней мере хорошей отправной точкой
Удачи!