如果默认情况下未加载应用，则不会选择“角度材质”选项卡

Question

在此示例中，默认情况下选中了“升高按钮”标签

https://stackblitz.com/edit/angular-material?file=index.html

在修改html以单击按钮后加载应用程序时，默认情况下未选中该选项卡

https://stackblitz.com/edit/angular-material-smmas7?file=index.html

即使单击按钮后加载了应用程序，我是否可以对应用程序进行修改以默认选择选项卡？

Answer 1

从技术上讲，该应用程序/组件已经加载，您只是将其隐藏...因此，您无需单击按钮即可加载该组件，而只能通过单击按钮查看它。

• 如果在您的类中实现OnInit并执行控制台日志，您将 甚至在单击之前，都已看到该组件已初始化 按钮。

  export class AppComponent implements OnInit
  
  ngOnInit(){
    console.log('AppComponent Initialized');
  }
  

然后，如果将console.log(document.activeElement);添加到index.html中的show方法中，您将看到单击按钮后，按钮实际上仍然具有焦点；这就是您的组件未获得焦点的原因，并且最终是未显示墨水栏的原因...

• 组件外部的元素的焦点位于index.html级别，并且由于您以非角度的方式暴露组件的视图而影响了组件。

  function show()
    {
      document.getElementById("foo").style.display = "block";
      console.log(document.activeElement);
    }
  

单击按钮显示按钮具有焦点时，通过控制台产生以下输出。

 <input type="button" value="Click" onclick="show()">

---

因为您的组件已经在后台初始化，所以您错过了利用生命周期挂钩解决此问题的机会...，因为它们已经在后台调用，因此您无法以编程方式在组件内部设置焦点当单击index.html中的按钮时...或者至少是我建议的一种方式。

根据评论，探索找到一种正确的方法来正确利用框架，这不是实现此目标的方法……它也并没有达到您的预期。