小编Bur*_*nee的帖子

假设我们从以下初学者包开始:https: //github.com/angularclass/angular2-webpack-starter

之后npm install,npm run start一切正常.

我想添加一个外部css模块,例如bootstrap 4的css(只有css).(我知道bootstrap有一个bootstrap-loader,但现在我要求一般解决方案,所以请在这里考虑bootstrap 4,因为它可能是通过npm提供的任何其他css模块).

我通过npm安装bootstrap: npm install bootstrap@4.0.0-alpha.4 --save

首先,我认为添加import 'bootstrap/dist/css/bootstrap.css';到vendor.browser.ts文件就足够了.

但事实并非如此.

我该怎么做才能找到合适的解决方案？

解决方案我不是要求:

1. "将外部css模块复制到assets文件夹,然后从那里使用它"
   • 我正在寻找与npm包一起使用的解决方案.
2. "使用bootstrap-loader for webpack"
   • 正如我上面所描述的,我正在寻找一个通用的解决方案,bootstrap只是一个例子.
3. "使用另一个堆栈"
   • 我正在寻找上面提到的确切启动包的解决方案.

为了展示一种真实世界的例子,假设我们想在我们的应用程序中使用@ angular/material的datepicker.

我们希望在很多页面上使用它,因此我们希望将它添加到具有相同配置的表单中非常容易.为了满足这一需求,我们在<mat-datepicker>ControlValueAccessor实现周围创建了一个自定义角度组件,以便能够[(ngModel)]在其上使用.

我们希望处理组件中的典型验证,但同时,我们希望为包含我们的外部组件提供验证结果CustomDatepickerComponent.

作为一个简单的解决方案,我们可以实现这样的validate()方法(innerNgModel来自导出的ngModel:.#innerNgModel="ngModel"请参阅本问题末尾的完整代码):

validate() {
    return (this.innerNgModel && this.innerNgModel.errors) || null;
}

此时,我们可以以非常简单的方式在任何表单组件中使用datepicker(如我们所愿):

<custom-datepicker [(ngModel)]="myDate"></custom-datepicker>

我们还可以扩展上面的行以获得更好的调试体验(像这样):

<custom-datepicker [(ngModel)]="myDate" #date="ngModel"></custom-datepicker>
<pre>{{ date.errrors | json }}</pre>

只要我更改自定义datepicker组件中的值,一切正常.如果datepicker有任何错误,则周围的表单仍然无效(如果datepicker有效,它将变为有效).

但!

如果myDate外部组件的成员(一个作为ngModel传递)由外部组件(如:)更改this.myDate= null,则会发生以下情况:

1. 在writeValue()该CustomDatepickerComponent的运行,并将其更新日期选择器的值.
2. 在validate()该CustomDatepickerComponent的运行,但在这一点上innerNgModel没有更新,因此返回以前的状态的验证.

要解决此问题,我们可以从setTimeout中的组件发出更改:

public writeValue(data) {
    this.modelValue = data ? moment(data) : null;
    setTimeout(() => { this.emitChange(); }, 0);
}

在这种情况下,emitChange(自定义组件的广播更改)将触发新的验证.并且由于setTimeout,它将在下一个周期运行,而innerNgModel已经更新.

我的问题是,如果有更好的方法来处理这个问题而不是使用setTimeout？ 如果可能的话,我会坚持模板驱动的实现.

提前致谢!

该示例的完整源代码:

定制datepicker.component.ts

import {Component, forwardRef, Input, …

我在我的项目中使用 angular-cli 和 @ngx-translate。该应用程序具有延迟加载模块和一个带有组件的共享模块（非延迟加载）。语言文件按模块分开。问题是当我在延迟加载的组件中使用共享组件时，共享组件从延迟加载的模块 (feature.xx.json) 的翻译文件中获取字符串，而不是从 app 模块 (core.xx.json) 中获取字符串。所以我应该在每个功能模块的翻译文件中声明共享组件的字符串。

我希望，共享模块始终使用应用程序模块（core.xx.json）或自己的翻译文件。

app.module.ts

    export function createTranslateLoader(http: HttpClient) {
        return new TranslateHttpLoader(http, './assets/i18n/core.','.json'); 
    }
    ...
    imports [ 
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            },
            isolate: false
        }),
        ...
    ]

共享模块.ts

    imports: [
        TranslateModule,
        ...]

功能模块

    export function createTranslateLoader(http: HttpClient) {
        return new TranslateHttpLoader(http, './assets/i18n/feature.', '.json');
    }
    ...
    imports: [
        ...
        SharedModule,
        TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            },
        isolate: true
        })] 

想象一下,给出以下情况:

我们的网站已经触发了大约20个请求(甚至更多).这些可以是任何类型的请求 - 我们不知道如何再次触发它们.在此网站上,所有请求都以同一网址为目标.请求可以具有订阅的事件侦听器.

如果使用Chrome,则会发送前6个请求,其他请求将在队列中等待发送(因为每个域的并行请求限制).

此时网页触发一个非常重要的请求(称之为"VIR"),该请求具有更高的优先级,然后发送到服务器,然后发送前20个请求.其他请求(及其事件监听器)也很重要,因此我们不能只是中止它们立即发送VIR.

我们需要一个解决方案来获取所有待处理的请求(6个已发送+ 14个队列中),中止它们,然后发送VIR,然后使用之前附加的相同事件侦听器再次发送其他请求.

如果没有其他(开箱即用)解决方案,2个基本问题是:

• 是否可以引用所有待处理的请求(包括队列)？
• 是否有可能中止xhr然后再次发送(通过某种方式克隆它们,或者我不知道)？

还有一个相关问题:

• 我记得每个主机名的并行请求限制是浏览器的限制,而不是仅限当前选项卡.是否有一个神奇的解决方案来处理它？如果是的话,我真的想写吗？:)

请注意,所有请求都必须在同一个域中发送.(意味着使用VIR定位不同的域不是此处的选项).但是,使用websocket或http/2可以解决基本问题,这些不是当前问题中的选项.

我很欣赏这个想法!Thx提前!

pm.:是的,这是一个javascript问题:)

给出的问题是传递复杂参数(参见下面的代码示例)在JSF中不起作用.

<h:outputFormat value="Final result is: {0}">
    <f:param>
        <h:outputFormat value="{0} to {1}">
            <f:param value="#{mngr.lowerBound}"/>
            <f:param value="#{mngr.upperBound}"/>
        </h:outputFormat>
    </f:param>
</h:outputFormat>

我不是在寻找使用ManagedBean的解决方案,如下所示:

<h:outputFormat value="Final result is: {0}">
    <f:param value="mngr.formattedParams />
</h:outputFormat>

但是有一个适用于OmniFaces的解决方案: JSF-2.H:OUTPUTFORMAT.复杂的f:param

我想知道PrimeFaces中是否还有解决方案？

在IE8中,如果我完全单击提交按钮上的文本值,它就不会从input:activeCSS选择器中获取属性.

但如果我点击按钮上的其他地方就可以获得它们.

为什么？我该如何解决？