Question

我有一个组件可以用来预览一些离子代码：

通常我会将以下内容添加到index.html页面，但是在这种情况下，我只希望预览组件受到影响。

<script type='text/javascript' src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0/css/ionic.bundle.css">

我可以将以上内容添加到我的预览组件中，以便只有Preview.component.html使用上面的库吗？

Answer 1

默认情况下，在组件中声明的样式表仅影响该组件。

您应该将该样式表下载到您的应用中，然后将其移至/assets/styles/。并从您的组件类装饰器链接到该工作表：

@Component({
  selector: 'your-component-to-test',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css', './assets/styles/ionic.bundle.css' ]
})

Answer 2

在Angular中，每个组件都有单独的css文件。复制链接中的所有CSS，并将其粘贴到该文件中。

示例：

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

Answer 3

Component decorators - 快速浏览此内容，如果先前的尝试无法解决。

Answer 4

像这样将css添加到您的组件中

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css', './assets/styles/ionic.bundle.css']
})

也可以将css文件下载到asset / style文件夹中，然后可以链接到组件中

Angular Add CSS库仅影响一个组件

4 个答案: