代码之家 › 专栏 › 技术社区 › slevin

为某些角度6页插入引导css文件

angular6 routing angular

slevin · 技术社区 · 6 年前

我使用的是Angular6,现在通过在我的 index.html .

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cma</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

这将引导css放在每个页面中。

我只想在我的cms路由中使用引导css,比如 localhost:4200/cms/anything .

我该怎么做?把css链接放在每个cms html页面中并不明智。我想为每个cms页面设置一次。我该怎么做?我退房了 this 但没走多远。

谢谢

编辑

我的路线是

const appRoutes : Routes = [
  {path:'', component:HomeComponent},
  {path:'cms/register', component:RegisterComponent},
  {path:'cms/login', component:LoginComponent},
  {path:'cms/profile', component:ProfileComponent,canActivate:[AuthGuard] },
  {path:'cms/invitation', component:InvitationComponent,canActivate:[AuthGuard] }
];

2 回复 | 直到 6 年前

Shaurya Dhadwal 6 年前

您可能需要为CMS创建一个特定的路由,然后为您可能需要的任何组件添加子路由。

export const routes: Routes = [
      { path: 'home', component: HomeComponent},
      { path: 'cms', 
        component: CMSComponent,
        children: [
                      { path: '/anything', component: AnythingComponent }
                  ]}
    ];

然后将bootstrap.css url添加到 样式URL 在CMS组件中。这样,引导程序将只对CMS及其子组件可用。

@Component({
  selector: 'app-cms',
  templateUrl: './cms.component.html',
  styleUrls: ['./cms.component.css', './bootstrap.css']
})
export class CMSComponent {

  constructor() { }

  ngOnInit() {
  }
}

我还没试过这个,但也许这个解决方案中的一些东西可以起作用。如果是,请告诉我:)

Ali Rida 6 年前

您必须在component.css文件中导入引导文件,如下所示:

@import "bootstrap/bootstrap"

还可以添加将component.ts文件中的封装更改为None

@Component({
  selector: 'app-cms',
  ...,
  encapsulation: ViewEncapsulation.None
})

这样,引导样式将应用于组件及其子组件。

注意,如果bootstrap文件夹位于component文件夹中,则此操作有效;如果不在component文件夹中,则应链接到bootstrap文件夹的正确位置(通常位于node_modules文件夹中)。

编辑:

添加名为CmsComponent的组件,并在其html文件中添加以下内容:

<router-outlet></router-outlet>

然后将您的路线更改为:

const appRoutes : Routes = [
  {path:'', component:HomeComponent},
    { path: 'cms', component: CmsComponent, children: [
        { path: 'register', component: RegisterComponent },
        { path: 'login', component: LoginComponent },
        { path: 'profile', component: ProfileComponent, canActivate:[AuthGuard] },
        { path: 'invitation', component: InvitationComponent, canActivate:[AuthGuard] },
    ]}
]

这样,CmsComponent css文件中包含的引导css将应用于所有子组件。