- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
是否可以根据条件导入模块?仅当 angular 2 通用应用程序在浏览器中呈现而不在服务器中呈现时,才专门导入外部模块。
这个问题与一些依赖于浏览器特性并且只能在浏览器中呈现的 PrimeNG 模块有关。最好在服务器呈现时省略它们,因为日历和其他组件对于 SEO 来说并不是很重要。
目前,如果关闭服务器渲染,我可以渲染日历组件。但是当我将下面的代码包含在我的 app.module.ts 中并打开服务器呈现时,服务器在 button.js 中产生错误“ReferenceError:事件未定义”。
import { CalendarModule } from 'primeng/components/calendar/calendar';
@NgModule({
...
imports: [
...,
CalendarModule
]
})
angular提供了一个isBrowser条件。
import { isBrowser } from 'angular2-universal';
但我不知道如何将它用于条件导入。真的有办法为模块做到这一点吗?
最佳答案
所以有一种方法可以在浏览器中渲染 PrimeNG 组件,并在服务器渲染时忽略它们。这些问题帮助我开始挖掘正确的方向:
angular-cli: Conditional Imports using an environment variable
How can I conditionally import an ES6 module?
在服务器呈现时,我使用模拟组件来呈现一个简单的输入字段并使用相同的选择器“p-calendar”。我在 app.module 中得到的最终代码。
...//other imports
import { isBrowser } from 'angular2-universal';
let imports = [
... //your modules here
];
let declarations = [
... //your declarations here
];
if (isBrowser) {
let CalendarModule = require('primeng/components/calendar/calendar').CalendarModule;
imports.push(CalendarModule);
}
else {
let CalendarMockComponent = require('./components/primeng/calendarmock.component').CalendarMockComponent;
declarations.push(CalendarMockComponent);
}
@NgModule({
bootstrap: [AppComponent],
declarations: declarations,
providers: [
... //your providers here
],
imports: imports
})
要使您的模拟组件支持 [(ngModel)] 绑定(bind),请使用本教程。 http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel
import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CalendarMockComponent),
multi: true
};
@Component({
selector: 'p-calendar',
template: '<input type="text" class="form-control"/>',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CalendarMockComponent implements ControlValueAccessor {
private innerValue: any = '';
private onTouchedCallback: () => void = () => {};
private onChangeCallback: (_: any) => void = () => {};
//From ControlValueAccessor interface
writeValue(value: any) {
if (value !== this.innerValue) {
this.innerValue = value;
}
}
registerOnChange(fn: any) {
this.onChangeCallback = fn;
}
registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}
}
关于 Angular 通用: dynamic imports for browser only,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40751383/
我使用 AppFuse 创建项目已经有一段时间了。我已经知道有两种方法可以开发 DAO 和 Manager 类: GenericDao/GenericManager 方法 UniversalDao/U
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
在普通的单线程程序中,捕获异常只需要通过try ... catch ... finally ...代码块就可以了。那么,在并发情况下,比如在父线程中启动了子线程,如何在父线程中捕获来自子线程的异常,
假设我有一个这样的界面 interface Example { first_name: string, last_name: string, home_town: string
我已经成为 hg 用户几年了,对此我很高兴! 我必须开始一个我以前从未做过的项目。我们的想法是开发一个具有批处理模式和 GUI 的软件。 因此,批处理模式和 GUI 模式都有共同的源,但每种模式也都包
我可以在Silverlight中使用generic.xaml来设置应用程序中所有TextBlock的样式吗? 我原以为它会起作用,但它没
顶部 map 有 3 个子 map ,每个子 map 都有不同的对象。 像下面的代码,如何将通用添加到 map 顶部? Map top = new ConcurrentHashMap();
我想创建一个hashmap,其中键是接口(interface)A,值是接口(interface)B。然后我想用实现A和B的类来初始化它。是否可以使用java泛型来做到这一点? 也就是说,我想要类似的东
Enum 位于 java.lang.Enum 中,Object 位于 java.lang.Object 中>。那么,为什么 Enum 不是 Object 呢? (我收到一个java.lang.Clas
我有一种方法,check,它有两个 HashMap 作为参数。这些映射的键是 String,值是 String 或 Arraylist。 哪个是更好的解决方案: public static boole
我启动了针对iPhone的应用程序,现在我也想将其应用程序用于iPad。当我开始做iPhone项目时,即使我添加了iPad xib,它也无法正确显示,如何转换我的项目同时适用于iPhone和iPad(
这行代码(代码1)有什么区别 auto l1 = [](auto a) { static int l = 0; std::cout operator() for type const char*) 被
使用 Generic#to,我可以获得 case class 的 HList 表示: import shapeless._ case class F(x: Int, y: String) scala>
我有一个 BiDiMap 类。如何使其通用,不仅接受 String 而且接受 Object 类型的对象作为输入参数,同时保持所有原始函数正常工作。例如,我希望能够使用函数 put() 和 Object
我在编译 foreach 循环时遇到问题。我很确定这是我的泛型处理的问题,因为该错误是对象兼容性问题。我已搜索解决方案,但找不到任何可以解决该问题的内容。 这是定义 Iterable adjList
大约有 6 个 POJO 类(域实体、DTO、DMO)都具有几乎相同的字段。为了从一个对象转换为另一个对象,我传递一个对象并调用它的 getter 将其设置到另一个对象中。 private UserT
有没有什么方法可以创建一个通用的 for 循环,它可以正确地循环遍历数组或对象?我知道我可以编写以下 for 循环,但它也会遍历将添加到数组的其他属性。 for (item in x) { co
我已经有一段时间没有写js了,显然有点生疏了。试图理解以下问题。 getCurrentPosition successCallback 中的警报正确显示纬度,但最后一行警报未定义。为什么我的 clie
请帮助我,我从来没有用 xib 为 iPhone/iPad 制作过通用的 UIViewControllers。如何使用 .m 和 .h 文件以及 _iphone.xib 和 _ipad.xib 创建类
我正在尝试创建一个 createRequest 函数,我可以将其重新用于我的所有网络调用,有些需要发布 JSON 而其他则不需要,所以我正在考虑创建一个采用可选通用对象的函数;理论上是这样的: str
我是一名优秀的程序员,十分优秀!