小编Sum*_*wal的帖子

我有一个实现,其中父级希望通过使用@Input子组件中可用的参数将某些数据传递给子组件.但是,此数据传输是可选的,父母可能会或可能不会根据要求传递它.是否可以在组件中包含可选的输入参数.我在下面描述了一个场景:

 <parent>
    <child [showName]="true"></child> //passing parameter
    <child></child> //not willing to passing any parameter
</parent>



//child component definition
@Component {
    selector:'app-child',
    template:`<h1>Hi Children!</h1>
          <span *ngIf="showName">Alex!</span>`
}


export class child {

    @Input showName: boolean;

    constructor() { }

}

我有一个组件,它在表单中有一个表单和一些子组件.子组件是使用创建的*ngFor,每个子组件都包含input元素.Angular2编译器给出的错误如[formGroup]未定义.

这个实现是正确的吗？

父组件:

<section class="data-body">
        <form [formGroup]="checkoutForm" novalidate>
            <app-checkout-product-view *ngFor="let item of checkoutData.products" [_product]="item" formGroupName="products"></app-checkout-product-view>
                <div class="col-md-4">
                    <label>Nominee:</label>
                    <select required [(ngModel)]="checkoutData.selectedNominee" [ngModelOptions]="{standalone: true}">
                        <option *ngFor="let nominee of checkoutData.nomineeList" [value]="nominee">{{nominee}}</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label>Bank Account:</label>
                    <select [(ngModel)]="checkoutData.selectedBank" required [ngModelOptions]="{standalone: true}">
                        <option *ngFor="let bank of checkoutData.bankList" [value]="bank">{{bank}}</option>
                    </select>
                </div>
            </div>
        </form>
    </section>

子组件: app-checkout-product-view

<div class="row">
    <div class="col-md-4">
        <md-input required [(ngModel)]="product.investmentAmount 
                  formControlName="investmentAmount">
            <span md-prefix>&#x20B9;</span><!--Rupee icon-->
        </md-input>
    </div>
</div>

PS:所有的进口都很好所以我很确定这里没有导入错误

我已经准备好了使用angular2/forms提供的ReactiveForms.此表单有一个表单数组产品:

this.checkoutFormGroup = this.fb.group({
            selectedNominee: ['', Validators.required],
            selectedBank: ['', Validators.required],
            products: productFormGroupArray
        });

productFormGroupArray是一个FormGroup Objects数组.我使用以下方法获取控件,即FormArray对象:

this.checkoutFormGroup.get('products')

我试图在索引的product数组中获取元素i.如何在不循环数组的情况下完成这项工作？

编辑:

我尝试使用at(index)方法:

this.checkoutFormGroup.get('products').at(index)

但这会产生一个错误:

Property 'at' does not exist on type 'AbstractControl'.

编辑2: 从服务器收到checkoutData和fund.

this.checkoutData.products.forEach(product => {
                    this.fundFormGroupArray.push(this.fb.group({
                        investmentAmount: [this.fund.minInvestment, Validators.required],
                        selectedSubOption: ['', Validators.required],
                    }))
            });

我有一个父组件,它在点击链接时打开一个新组件,这个新组件应该有一个关闭按钮,在关闭时向父发送一个关闭消息并销毁自己.

我们可以使用ngOnDestroy方法发送结束消息,但是如何调用子组件的销毁.

<parent>
    <child></child> //child to be opened on click but close 
                    //event should be inside the child componenet
</parent>

如果我在这里遇到一些概念错误,请纠正我.谢谢

我正在使用sass以模块化结构设计我的网站,我愿意以这样的方式组织样式表:我在每个模块级别(而不是组件级别)定义样式表,然后将其导入所有组件以保持标准整个模块的布局.

那么这是一个好方法吗？

如果是,是否有方法将CSS从module.ts文件导出到所有组件.以非常类似的方式,使用服务提供服务providers.这将节省我在所有组件中单独导入相同CSS文件的痛苦.

当我们将一个model子组件传递给子组件并对其进行修改时,这些值只会反映在子组件的局部变量中,而不能用于父组件.我们可以通过引用从父到子传递值.所以这些变化也是可见的.

我observable在服务层使用a实现了相同的功能.但我们不能通过参考传递@Input吗？

我正在实现material2的对话框组件并面临这个问题:

我想为所有确认类型的消息创建一个通用对话框,开发人员可以根据业务需求将文本输入到对话框中.但根据文件,没有这样的规定.我们是否有相同的解决方法,或者我应该将其作为github上的功能请求发布？

export class ConfirmationDialogComponent implements OnInit {

@Input() confirmationText: string;
@Input() confirmationTitle: string;
@Input() confirmationActions: [string, string][] = [];

constructor(public dialogRef: MdDialogRef<ConfirmationDialogComponent>) {
}

ngOnInit() {
}

}

这样打电话:

let dialogRef = this.dialog.open(ConfirmationDialogComponent);

我的文件夹结构/src/app/some-module/some-component和src/public/images/user.png.现在,当我想要在我的某个组件中展示一个图像时,我必须给出一条路径,../../../public/images/user.png一旦图像数量增加,它似乎过于天真和浪费.

我们是否在angular2中有一个路由机制或相对路径来提供静态文件.我正在使用Angular2和webpack.

我有一个大型项目，直到现在都在 webpack 上运行，并且在 angular@4.3.3 上运行良好。今天我计划将其转移到 ng-cli 以利用通用等功能。一切都运行良好，除了当我尝试在 prod/prod+aot 中构建项目时，我得到：最大调用堆栈大小超出。

检查了问题的各个地方，大多数人都告诉检查循环依赖。但是根据最新的 cli@1.2.7，循环依赖应该显示为构建时间，但事实并非如此。我计划增加节点虚拟机堆栈的大小，但无法实现。我不想使用 ng 弹出并再次陷入 webpack 的混乱中。

cli@1.2.7 还有其他一些方法或解决方案吗

谢谢

包.json

{
  "name": "test-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~4.3.3",
    "@angular/compiler": "~4.3.3",
    "@angular/core": "~4.3.3",
    "@angular/forms": "~4.3.3",
    "@angular/http": "~4.3.3",
    "@angular/animations": "~4.3.3",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/platform-browser": "~4.3.3",
    "@angular/platform-browser-dynamic": "~4.3.3",
    "@angular/platform-server": "~4.3.3",
    "@angular/router": "~4.3.3",
    "angular2-highcharts": "~0.5.5",
    "@types/highcharts": "~4.2.57", …

我有一个要*ngFor在HTML页面上显示的对象列表。现在，用户与U​​I进行交互并更改原始值之一（布尔值，从false变为true）。

根据我的理解，*ngFor仅当列表对象被完全修改（即删除并再次添加到列表）时，才会呈现更改。如果我对这个概念是正确的，那么您能否建议一种方法来反映基本类型的更改，而无需重新初始化组件或修改对象引用。

例如：

  <div *ngFor="let item of list">
        <md-checkbox [(ngModel)]="item.selected"></md-checkbox>
  </div>

用户单击该复选框，但是在服务器进行某些验证后必须选中该复选框。因此，假设需要取消选中该复选框，并且用户会在小吃店收到消息。因此，我遍历列表并将其修改item.selected为false。但是，当我在对象项中修改了原始类型selected（boolean）时，更改未反映出来。因此，如何在不重新加载或初始化页面的情况下呈现新值。

如果需要更多输入，请告诉我。