从注入的innerHTML使用Angular4 Router

Question

I'm using Angular4 and returning html from an XHR request that is displayed in a div tag using [innerHtml].

It's safe html so I'm using the DomSanitizer with bypassSecurityTrustHtml so that I can include JavaScript in the html.

I would like to include links in the returned html to locations within the Angular app. ie via the router.

Question: Is there a way to fire an Angular function from the returned html so that I can call the router? Or is there a better way?

Thanks!

Answer 1

So you are rendering dynamic html using innerHTML and you probably found out that angular codes won't work when using innerHTML . Right? And if you use href attribute in anchor tag, clicking on it will for your application to load again.

It may be an overkill but you use RuntimeComponent .

Basically:

• you create a RuntimeComponentModule
• get the ComponentFactory
• instantiates a single component and inserts its host view into your container.

Sample code below:

app.component.html

<div #container></div>
<router-outlet></router-outlet>

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
    private componentRef: ComponentRef<{}>;

    constructor(private compiler: Compiler) { }

    ngOnInit(): void {
        const template = `
            <h1>Check Header H1</h1>
            <a [routerLink]='["/a"]'>Go to A</a>
            <a [routerLink]='["/b"]'>Go to B</a>
        `;
        const data = [];
        this.createComponent(template, data);
    }

    createComponent(_template, _data): any {
        let metadata = {
            template: _template
        };

        let factory = this.createComponentFactorySync(metadata, null, _data);
        if(this.componentRef){
            this.componentRef.destroy();
            this.componentRef = null;
        }
        this.componentRef = this.container.createComponent(factory);
    }

    createComponentFactorySync(metadata: Component, componentClass: any, inputdata: any): ComponentFactory<any> {
        const cmpClass = componentClass || class RuntimeComponent { /*Component declaration*/
            name: string = "C1"; data: any = inputdata
            ngOnInit(): void {
                console.log('ngOnInit()')
            }

            ngOnDestroy(): void {
                console.log('ngOnDestroy()');
            }
        };
        const typeD: TypeDecorator = Component(metadata);
        const decoratedCmp = typeD(cmpClass);
        @NgModule({imports: [RouterModule], declarations: [decoratedCmp]}) /*import RouterModule for RouterLink to work*/
        class RuntimeComponentModule {}
        let module: ModuleWithComponentFactories<any> = this.compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
        return module.componentFactories.find(f => f.componentType === decoratedCmp);
    }
}

app.module.ts

const appRoutes:Routes = [
    { path: '', redirectTo: 'a', pathMatch:'full'},
    { path: 'a', component: AComponent},
    { path: 'b',component: BComponent},
]

Notice:

• Unlike you, I have made app component's div #container to be created at runtime. However it has the a [routerLink] in its html template which will work.
• Do not copy paste blindly, do you own research before using it.