小编abh*_*ddy的帖子

我在这个演示中实现了模型驱动的表单.如果用户没有输入任何内容并提交表单,我将使用此逻辑显示错误消息

<div *ngIf="(!myForm.find('sku').valid && submitted)">**sku is required</div>

我传递一个布尔变量'submitted'来检查控件在提交时是否有效.有没有办法检查控件的状态而不手动传递变量？Angular2形式为我们提供了6类,如ng-touched,ng-untouched,ng-valid,ng-invalid,ng-pristine,和ng-dirty.我想仅使用这些类来显示错误消息.

如何使用ngFor多次渲染模板时提高性能？我有一种情况,我需要根据计数显示相同的模板.我正在使用*ngFor.模板加载正确,但我担心性能.因为我需要反复显示相同的内容几千次,然后加载模板后性能会很慢.我在这里做了一个plunker演示http:// plnkr.co/edit/qTj4SVRnFD6N15PZ1GWC?p=preview.请增加formarray中表单组的数量,相差1000,然后系统将变慢或发生故障.这就是我创建formarray的方式,

       for(var i=0;i<100;i++){
  let dummyFormGroup=this.fb.group({
    'name':[''],
    'place':['']
  })
  this.dummyFormArray.push(dummyFormGroup);
}

我用这样的ngFor渲染formarray中的控件

  <div *ngFor="let formgroup of dummyFormArray.controls"   style="display:flex;flex-direction:row">
<p>
  <label>Name:</label>
  <input type="text" [formControl]="formgroup.controls['name']" />
</p>
<p>
<label>Place:</label>
<input type="text" [formControl]="formgroup.controls['place']" />
</p>

有人可以建议我一种方法,我可以在模板加载后提高性能吗？因为如果它需要渲染数千条记录,我可以等待加载模板.但是一旦模板准备就绪,我希望系统在这种情况下使用*ngFor快速.有人请帮我解决这个问题.谢谢 !

当我导航回相同的组件时,我开始了解Sticky Routes重新附加早期的组件数据.我已经通过查看此https://www.softwarearchitekt.at/post/2016/12/02/sticky-实现了一个演示 routes-in-angular-2-3-with-routereusestrategy.aspx 博客https://plnkr.co/edit/KVlRi9PtPeOpvn8bECBi?p=preview ...是否可以应用条件以便routerreusestrategy仅适用于少数组件？

我们创建的应用程序大致有400个组件和70-80个服务.我们得到了AOT构建,其中main.js的大小为5.8 Mb,vendor.js的大小为1.2Mb.我不知道这种比较是否正确.我们的App文件夹的整个大小只有4.24Mb.由于我们的App文件夹仅为4.24Mb,因此AoT文件大小应小于它.从这个链接https://github.com/angular/angular-cli/issues/4896我开始知道html是在构建时编译的,所以html大小会增加.以下是我们使用的第三方库:

1. Ag-Grid(https://github.com/ag-grid/ag-grid-angular)

2. Angular2-JWT(https://github.com/auth0/angular2-jwt)

3. MyDatePicker(https://github.com/kekeh/mydatepicker)

我们也在使用"PDFMake".

我主要有两个问题:

1. main.js的大小增加到5.8Mb是可以接受的,因为html代码将在构建时为400个组件编译.
2. vendor.js文件由什么组成.它是否包含第三方库或PDFMake等文件？

我真的想知道如何在没有延迟加载和gzip压缩的情况下减少main.js的文件大小？

我正在尝试在写入事件期间更改 SheetJs 中单元格的字体颜色。我想将所有单元格的字体颜色从黑色更改为红色。下面是我在节点中执行sheetjs 写入事件的方式。

var data = [[1,2,3],[true, false, 'rahul'],["foo","bar","0.3"], 
["baz", 'abhi', "qux"]]
var ws_name = "SheetJS";

 var XLSX = require('xlsx')


var wb = {}
wb.Sheets = {};
wb.Props = {};
wb.SSF = {};
wb.SheetNames = [];

var ws = {}

var range = {s: {c:0, r:0}, e: {c:0, r:0 }};

  for(var R = 0; R != data.length; ++R) {
    if(range.e.r < R) range.e.r = R;
    for(var C = 0; C != data[R].length; ++C) {
       if(range.e.c < C) range.e.c = …

嗨......我发现了一篇关于使用动态组件加载器和Dispose方法添加和删除组件的帖子.我想破坏一次创建的组件.我有plunker 演示和源代码我在其中找到了演示Angular 2 - 动态添加/删除组件 ...我知道我想将所有数据存储componentref在一个数组中然后迭代它们并处理它...但我是不能使它工作...请帮助我如何销毁所有组件.

     remove() {
    this._ref.dispose();
  }

这就是我如何摧毁一个组件......如何一次性摧毁所有组件？

我在这里有plunker演示:

http://plnkr.co/edit/LX1m2zIpxe3M1Zs5F6zA?p=preview

其中一个地址组件嵌套在父组件中.

如何将表单验证应用于地址组件并获取表单提交上的地址组件的值？有人指导我获取嵌套组件的表单值.

  constructor(fb: FormBuilder) {  
this.myForm = fb.group({  
  'name':  ['', Validators.required],
  'Phone':  ['', Validators.required]  
});  

}

如何在父级中注入地址组件的值？这样做的最佳做法是什么,因为我不熟悉嵌套组件中的表单.请帮忙.

我有一个formgroup控件有一个formcontrol.我已经订阅了formgroup和formcontrol的valuechanges事件.点击按钮我想禁用并重置formcontrol的值而不激活valuechanges所以我用过emitEvent:false它不会触发formcontrol的值更改但是formgroup的值更改被触发.I在这里有一个示例plunker演示https://plnkr.co/edit/cN2wROc7o16w52ZEPZgH?p=preview.这是预期的行为或问题.可以有人指导我

  ResetAndDisable(){
    this.ParentGroup.controls['test'].reset(null,{emitEvent:false});
    this.ParentGroup.controls['test'].disable({emitEvent:false});
 }
 Enable(){
    this.ParentGroup.controls['test'].enable({emitEvent:false});
 }

我在tab1中有一个表单和一个按钮的标签.我在父组件中有一个事件,它使当前标签无效并且下一个标签处于活动状态.如何从子组件中调用父组件中的事件？

  gotosecondtab(){
this.firsttabactive=false;
this.secondtabactive=true;
}

这是父组件中的事件...我想从子组件运行此事件

onSubmit(): void {  
console.log('you submitted value: ', this.myForm.value); 
//How to call the parent event here
}

我想在执行onSubmit()事件时运行gotosecondtab()事件......请有人帮助我

我有两个组件,一个父母和一个孩子,我想从孩子使用DI访问父组件中的变量,但我没有得到那个.我做了一个plunker演示http://plnkr.co/edit/fcfweLJAmadKVWKXF25l?p=preview ...我试图从child访问变量的值并且正确地得到但不是从父到子.这就是我在子组件中访问变量的方式

@Component({
  selector: 'child',
  providers:[AppComponent]
  template: '<h1>My second Angular 2 App</h1>'
})
class NameComponent {
  name:string;
  constructor(AppComponent: AppComponent) {
    this.name = AppComponent.getName();
    console.log(this.name);
  }
}

我想知道是否可以使用DI从父级访问变量？请告诉我如何获取价值观

嗨我有一个组件(父)有一个子组件.在子组件中有一个表单.我想从父组件提交表单.我试图从父组件中调用子组件中的函数但是我没有成功.我在这里做了一个plunker演示http:// plnkr .co/edit/TnkLK2FffAPP1YVo0uOg？p = preview 这就是我在Parent组件中调用函数的方法

  childcmp:App;
constructor(fb: FormBuilder){
this.childcmp=new App(fb);
}
submit(){
this.childcmp.onSubmit();
}

这是我在子组件中的代码

myForm: ControlGroup;

constructor(fb: FormBuilder) {  
this.myForm = fb.group({  
  'sku':  ['', Validators.required]  
});  
}

onSubmit(){  
console.log('you submitted value: ', this.myForm.value);  
}

我能够提交,但我没有得到正确的价值.有人请帮助我

我正在使用ag-grid angular2,我试图在每一行中放置一个按钮,我成功.当我点击该按钮时,我在按钮上添加一个事件监听器,这样当点击这个按钮时我想要提高一个事件.这就是我如何向每一行添加按钮

    {headerName: "Gold", field: "gold", width: 100,  cellRenderer: this.ageCellRendererFunc },

在这里,我正在为按钮编写addeventlistener逻辑

ageCellRendererFunc(params) {
    var eSpan = document.createElement('button');
    console.log(params);
    eSpan.innerHTML = 'Del';
    eSpan.addEventListener('click', function () {
        this.raiseevent();
    });
    return eSpan;
}

这是我想在单击按钮时引发的事件

raiseevent(){
alert('code worked');
}

但它显示一个错误,说没有定义raiseevent ...我怎么能纠正这个错误...我如何在addeventListener中给出一个事件的引用...有人请帮助我

我创建了一个用于添加联系方式的按钮。当用户点击时，应该向用户显示很少的输入字段，如名字、姓氏。

我怎样才能做到这一点？