相关疑难解决方法(0)

我有一个使用bootstrap 4的角度应用程序.我有一个粘贴到顶部的导航栏,我想添加填充浏览器中剩余空间的内容.除了顶部的导航栏,我有另一个div本身包含页眉和页脚内容.在页眉和页脚之间,我有一个主内容部分,我希望该部分(#two在我下面的示例中)填充所有空白区域.

我以为我可以使用css flexbox来完成这个,但是当我进入bootstrap世界时,我的简单非引导flexbox示例似乎什么也没做.我正在使用这些文档试图解决这个问题.

我认为使用align-self-stretch应该有助于实现这个目标,但它看起来像包含元素可能正在调整自己的大小足以容纳我的#outer内容,因此没有扩展Flexbox要完成.我试着天真地只是添加height:100%样式到包含div只是为了尝试伸展,但这似乎没有帮助.

我根据@ ZimSystem的响应创建了这个plunker示例.他的代码示例似乎完全按照我的意愿工作,但当我尝试将更改分成我的简单角度代码时,柔性拉伸没有发生.我不确定我在转换中打破它是做什么的.

这是我目前正在查看的整个角度分量:

<div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
        header content <br>
        another line <br>
        And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
        main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
        footer content
    </div>
</div>

这是显示导航栏和注入点的应用程序容器:

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a> …

所以我调用了这个组件InputEdit(基本上是一个Label可以在你点击时编辑的......很简单),这个组件有自己的阴影DOM CSS样式.但是当然每个托管组件都想为输入组件设置自己的字体大小和颜色......

那么最好的方法是什么？你能直接传入一个样式类并将整个CSS应用到组件中吗？或者最好手动传递每个值,如下所示:

     <InputEdit [color]="'red'"/>

这似乎有很多工作,但是由于我们使用阴影或模拟DOM,我们不能只在外部控制CSS.

我也知道你可以通过以下方式拼接打开阴影并定位直接元素:

/* styles.css */
UserInfo /deep/ InputEdit label {
    color: red;
    font-size: 1.1em;
}

这将基本上允许您进入名为UserInfo/deep(任何级别)/自定义组件的自定义组件InputEdit和目标标签,颜色为红色...

但同样,我想知道什么是专门针对ng2的最佳方法,比如将类配置传递给指令呢？

我目前正在学习Angular 2.我了解如何使用Angular Renderer设置一个ElementStyle,但现在我想使用该Renderer方法:

setElementClass(renderElement: any, className: string, isAdd: boolean) : void

我的问题是如何将CSS类导入到我的属性指令中？我必须将我的CSS类转换为JSON吗？

我有一个自定义指令,应该能够根据其他条件添加/删除类.

即

@Directive({
  selector: '[customDirective]'
})
export class CustomDirective {
  constructor(service: SomService) {
    // code to add class

    if (service.someCondition()) {
        // code to remove class
    }
  }
}