Question

给出以下示例html：

<!doctype html>
<html lang="en">

<head>
    <meta charset=" utf-8 ">
    <title>AngularFlex</title>
    <meta name="viewport " content="width=device-width, initial-scale=1 ">
</head>

<body style="display: flex;">
    <div style="background: red; height: 100px; flex:1 "></div>
    <div style="background: green; height: 100px; flex:2 "></div>
</body>
</html>

结果：

现在我想用Angular和多个组件来实现这个布局。以下html由angular：

生成

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AngularFlex</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body style="display: flex;">
    <app-root>
        <app-component1>
            <div style="background: red; height: 100px; width: 100px; flex:1"></div>
        </app-component1>
        <app-component2>
            <div style="background: green; height: 100px; width: 100px; flex:2"></div>
        </app-component2>
    </app-root>
</body>

</html>

结果：

正如您所看到的，布局被破坏，因为angular为每个组件添加了一个额外的html节点，并隔离了组件的CSS。

我知道有不同的方法来解决这个问题：

使用全局样式并将CSS添加到角度生成的html节点
在任何子组件中使用：host选择器来设置生成的节点的样式

然而，我想知道哪个是大项目的最佳实践？如何在Angluar中从头开始使用flexbox而不会感到疼痛？

使用带有角度隔离css的flexbox进行布局

0 个答案: