与该功能请求相关的@angular/*包？
router
描述
对于像 Clarity 这样的Angular UI库，关于 application layout ,需要为顶级路由组件添加 .content-container 类。我希望提出一个关于 绑定由 router-outlet 激活的组件的类的功能请求。
建议的解决方案
在 router-outlet 指令中添加 @Input() componentClass = '' 。
在 this.activated 初始化后，将类添加到创建或附加的组件中，如下所示：
this.activated.location.nativeElement.classList.add(...this.componentClass.split(' '));考虑的其他替代方案
如上所述，目前对于每个路由组件，应在 @Component 元数据中添加以下代码：
host: {
'[class.content-container]': 'true',
},将 componentClass 添加到 router-outlet 可以更直接、简洁地解决这个问题。
6条答案
按热度按时间cbeh67ev1#
你能举个例子吗？基于链接的ui库，我实际上想知道为什么内容容器会在每个路由组件中，而不是你的应用程序 shell ，路由器出口在里面。
或者，为什么不用
div将出口包裹起来，并将相同的样式直接应用于路由元素(类似于.my-container > :not(router-outlet))。bfhwhh0e2#
你好，@atscott。感谢你的评论。
这是一个很好的问题。事实上，CSS的方式确实可以很好地与设置良好的选择器一起工作。但我认为在某些情况下，我无法提供示例，需要在CSS方式上投入更多的努力，而不仅仅是为每个附加/激活的组件添加类。
csbfibhn3#
你好，@atscott。
我想到了一个例子。如果你想遵循一些UI库(如Bootstrap)的布局，你可能需要给你的组件添加类，这样当UI库升级时，你就不需要检查UI库的类并将更改复制到你自己的样式文件中。这两种方法都可以工作。
hof1towb4#
这个功能请求现在已经成为我们的待办事项候选！在接下来的阶段，社区有60天的时间进行投票。如果请求获得超过20票的赞成，我们将把它移到我们的考虑列表中。
你可以在我们的文档中找到更多关于功能请求流程的详细信息。
qvsjd97n5#
请注意，我们已经开始了针对您的功能请求的社区投票过程。距离投票过程结束还有20天。
有关Angular功能请求流程的更多详细信息，请参阅我们的文档。
ia2d9nvy6#
感谢您提交您的功能请求！看起来在投票过程中，它没有收集到足够的票数进入下一阶段。
我们希望保持Angular丰富且符合人体工程学，同时关注其范围和学习过程。如果您认为您的请求可能超出了Angular的范围，我们鼓励您与community合作，将其发布为开源项目package。
您可以在我们的文档中找到有关功能请求过程的更多详细信息。