0

I am facing the following (apparently simple) situation:

@Component({
  selector: 'my-component',
  template: `
    <p>{{text}}</p>
  `,
})
export class MyComponent implements OnInit {
  public text: string;

  constructor(
    private route: ActivatedRoute,
    private apiService: ApiService
  ) {}

  @Input() id: number;

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.text = this.apiService.getText(id);
    });
  }
}

The variable text comes from a CMS and can contain manually written instances of routerLink (well, actually of a custom directive that extends routerLink).

Is there any non hacky way to make those directives compile, when ngOnInit is called? It has to work with AOT. Any proposal of workaround is welcome.

Notice that the parent component is under "resolve", so this.route.params.subscribe will always emit a value straightaway after being called.

Thank you!

Adriano di Lauro
  • 469
  • 4
  • 10

2 Answers2

0

Sorry I don't have enough clout to comment and I don't mean to state the obvious, but since you are using Angular 5 with AoT have you looked at Angular Universal ?

BSchnitzel
  • 136
  • 2
  • 15
0

I would suggest you use regular <a href> instead of <a routerLink> in the CMS and then parse the <a href>s to route correctly. This also separates your CMS from your Angular application.

I've written this post on how you can do this with a Directive:

Can Angular 2 parse links received from external CMS to be resolved as internal

That solution used window and document which won't work well with AOT but those functions are pretty easy to rewrite.

Henrik Fräsén
  • 31
  • 3