Angular 使用 router-outlet 附加组件而不是替换整个页面

Question

首先。我已经在 Whosebug 中检查了所有类似的问题及其接受的答案，但没有任何效果。我正在使用 Angular 8.1.3

所以问题是当我点击 routerLink 时它只是将我的组件附加到现有组件上但它不应该附加它应该用新组件替换整个屏幕。我尝试删除 BrowserAnimationsModule 但没有帮助。

我已经在stackblitz 中创建了一个小应用程序，请看一下https://stackblitz.com/edit/angular-a8lmjs。在这里我能够重现问题。

Answer 1

这是路由器插座的正常行为。 AppComponent 托管路由器出口及其元素，因此它将显示它的元素和由路由器出口附加的与定义的路由匹配的组件。

此外，重要的是要知道 AppComponent 是 Angular 的默认 boostraped 组件，这意味着它总是默认加载到 index.htlm 的应用程序根目录中。

因此，如果您希望归档您所描述的内容，那么您应该只在 AppComponent 中放置 router-outlet，并创建另一个组件来托管删除的元素。