Question

我正在使用角度6，现在通过将css链接放在我的index.html中来引导css。

<!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路由中使用bootstrap css，例如localhost:4200/cms/anything。

我该怎么做？在每个cms html页面中放置css链接并不明智。我想为每个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] }
];

Answer 1

您可能必须为CMS创建特定的路由，然后为所需的任何组件添加子路由。

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

然后将bootstrap.css网址添加到CMSComponent中的 styleUrls 。这样，引导程序仅可用于CMS及其子组件。

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

  constructor() { }

  ngOnInit() {
  }
}

我还没有尝试过，但是也许这种解决方案可能有用。让我知道它什么时候：）

Answer 2

您必须像这样将bootstrap文件导入component.css文件中：

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

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

<router-outlet></router-outlet>

通过这种方式，引导样式将应用于组件及其子组件。

请注意，如果bootstrap文件夹位于component文件夹中，则此方法有效，否则，应链接到bootstrap文件夹的正确位置（通常在node_modules文件夹中）。

编辑：

添加一个名为CmsComponent的组件，并在其html文件中添加以下内容：

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] },
    ]}
]

然后将您的路线更改为以下内容：

<JDBC name="DBLogger" tableName="db_logs" ignoreExceptions="false">
    <DriverManager
         connectionString="jdbc:mysql://localhost:3306/twib"
         userName="****"
         password="****"
         driverClassName="com.mysql.jdbc.Driver"
         />

    <ColumnMapping name="date_time" pattern="%d{UNIX_MILLIS}" />
    <ColumnMapping name="user_id" />
    <ColumnMapping name="session_id" />
    <ColumnMapping name="user_ip" />
    <ColumnMapping name="user_agent" />
    <ColumnMapping name="device_info" />
    <ColumnMapping name="device_id" />
    <ColumnMapping name="device_mac" />
    <ColumnMapping name="device_imei" />
    <ColumnMapping name="device_imsi" />
    <ColumnMapping name="request_name" />
    <ColumnMapping name="request_xml" />
    <ColumnMapping name="response_xml" />
    <MessageLayout />
</JDBC>

通过这种方式，CmsComponent css文件中包含的引导css将应用于所有子组件。

为某些angular6页面插入bootstrap css文件

2 个答案: