Angular 20中Router Outlet路由组件样式适配问题求助

API 探路者

2026-4-7

我时隔很久重新上手Angular，现在有点摸不着头脑。之前用Angular的时候，定义的路由组件都会渲染在router-outlet的子节点里，但现在发现还是这种情况？这是正常的默认行为吗？

这个情况给我的样式适配带来了小麻烦。以前我可以直接给router-outlet设置样式让它占满屏幕，但现在似乎每个单独的路由组件都得在TS文件里绑定类才能控制尺寸？有没有更优的解决办法？我想要让路由组件能基于父组件的百分比来适配尺寸，但是在组件HTML里加容器div的话，又会遇到<app-..>这个自动生成的包裹层不跟着缩放的问题，div只能适配这个包裹层的大小，达不到我想要的效果。

我当前使用的是Angular 20，下面是我目前的代码片段：

app.html

<div class="container">
  <app-navigation class="nav"></app-navigation>
  <div [@content-animate] = "isContentExpanded() ? 'expanded' : 'collapsed'" class="content">
    <router-outlet></router-outlet>
  </div>
</div>

app.routes.ts

import { Routes } from '@angular/router';
import { Login } from './features/login/login';

const routes: Routes = [
  { path: '', component: Login, },
];

export {routes}

app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { routes } from './app.routes';
import { provideStore } from '@ngrx/store';
import { themeReducer } from './core/stores/theme/theme.reducer';
import { profileReducer } from './core/stores/profile/profile.reducer';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideAnimationsAsync(),
    provideZonelessChangeDetection(),
    provideRouter(routes),
    provideStore({
      theme: themeReducer,
      profile: profileReducer
    })
  ]
};