RouterLink 在分配给 typescript 变量的 HTML 代码中调用时不起作用

Question

我正在使用 Angular 9，并尝试将 html 代码分配给变量，然后使用 innerHtml 将其添加到主 html 代码中。 这是我的代码：

app.component.ts：

myVariable=`<div class="row">
              <button class="button button-1 text-center mx-auto" 
               routerLink="/myForm">
              <i class="fas fa-hotel"></i>Go to the next page</button>
            </div>`
   
  ngOnInit(): void {
         document.getElementById('mainText').innerHTML = this.myVariable ;
  }

除了没有按预期重定向到 Url "/myForm" 的 routerLink 之外，一切工作正常。

app.component.html：

<mat-dialog-content>
  <section>
    <div class="container-fluid" id="mainText">
    </div>
  </section>
</mat-dialog-content>

注意：当直接在 app.component.html 中添加路由时，路由工作正常，所以这不是 RouterModule 导入问题。