标签: angular2-inputs

我正在使用@input从父组件接收属性,以便在子组件的元素之一中激活CSS类.

我可以从父母那里收到房产并激活班级.但这只能工作一次.我从父级接收的属性是一个类型的布尔数据,当我将它的状态设置为false来自子组件时,它在父级中不会改变.

Plunkr:https://plnkr.co/edit/58xuZ1uzvToPhPtOING2 ? p = preview

app.ts

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HeaderComponent } from './header';
import { SearchComponent } from './header/search';

@Component({
  selector: 'my-app',
  template: `
    <app-header></app-header>
  `,
})
export class App {
  name:string;
  constructor() {
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, HeaderComponent, SearchComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

header.ts

import { Component, OnInit } from '@angular/core'; …

我真的不明白对象绑定是如何工作的,所以如果有人能解释我是否可以在基类中使用@Input(),或者更好:装饰器和继承.例如,如果每个表单都应该接收一个客户,我有一个基类:

export class AbstractCustomerForm{

@Input() customer;
...
}

然后我在实际组件中扩展此类:

export AwesomeCustomerForm extends AbstractCustomerForm implements OnInit{
    ngOnInit(){

        if(this.customer)
            doSomething();

    }
}

但这不起作用,客户永远不会被设置:(

我正在使用带有Typescript的Angular2

假设我的app组件模板中有以下内容:

... 
<coffee-cup [coffee]=""
...

我的coffee-cup组件:

@Component({
  selector: 'coffee-cup',
  ...
})
export class CoffeeCup {

  @Input() 
  public coffee = 0;

}

我目前不确定我的输入应该是什么样子.它可能看起来像这样:

@Input()
public coffee = 0;

要么

@Input()
private coffee = 0;

我目前倾向于将成员变量咖啡私有化.

• 我想为组件定义一个清晰的公共API
• 我只想通过模板公开设置coffee属性
• 我目前没有任何理由允许直接从父组件读取或设置咖啡.如果需要,我可以删除私有修饰符.

我查看组件的方式是有两个单独的API与之交互:

1. 模板API,由@Inputs和组成@Outputs
2. Typescript API由所有公共属性和方法组成

我没有检查在下列情况下发生了什么,但是,它可能会改变答案:

• 假设咖啡成员是公开的.如果我appComponent能存取CoffeeCup使用@ViewChild,并设置咖啡成员,将生命周期挂钩(像ngOnChange)火？

重申一下这个问题:Angular2应该@Input是公开的,还是应该通过将它们设为私有来实现更严格的API？

我正在尝试构建一个<markdown-component>使用ES6语法.该@Input语法糖不ES6支持,我无法找到一个可行的替代方案.

我在父母中定义输入:

<ng2-markdown [source]="source"></ng2-markdown>

然后使用以下方式接受输入:

@Component({
  selector: 'ng2-markdown',
  inputs: [ 'source' ]
})

如果我添加一个模板,我可以得到它将按预期输出值,但是没有办法在构造函数中使用输入.

该模块实际上应该是一个指令,该source值将定义要加载的Markdown文件的路径.

有没有一种简单的方法将输入绑定注入提供程序工厂的deps数组？下面显然不起作用.

const myServiceFactory = (object: any) => {
   //...
};

@Component({
    // ...
    inputs: ['object'],
    providers: [
        {
            provide: Object,
            useValue: object,
        },
        {
            provide: MyService,
            useFactory: myServiceFactory,
            deps: [Object]
        }
    ]
})

我在我的 angular2 应用程序中使用 ng2-uploader。

这是我的代码：

 options: Object = {
   url: "http://localhost/APP/opsnd/api/index.php/mydkd/configured/?"+JSON.stringify(this.type)
 };

我在上面的代码中所做的是附加一个动态更改的参数并与文件一起发送到服务器。

网页：

input type="file" ngFileSelect  [options]="options" (onUpload)="handleUpload($event)" (beforeUpload)="beforeUpload($event)">

问题是，当我选择一个文件时，它会使用默认的 [option] url 自动加载到服务器。因此，即使 url 中的参数发生变化，默认的 url 也会发送到服务端。如何动态更改 [options] 以便它监听组件中的更改？

我是一个新手,试图从ng-book 2(v49)学习Angular2.以下是article.componenets.ts文件的内容:

import { Component, OnInit } from '@angular/core';
import { Article } from './article.model';

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
 styleUrls: ['./article.component.css'],
 host: {
 class: 'row'
 }
})
export class ArticleComponent implements OnInit {
  @Input() article: Article;



  voteUp(): boolean {
    this.article.voteUp();
    return false;
  }

  voteDown(): boolean {
    this.article.voteDown();
    return false;
  }

  ngOnInit() {
  }

}

这是angular-cli上的错误:

ERROR in C:/Users/saad/Desktop/books/Angular JS2/angular2Reddit/src/app/article/article.component.ts (13,4): Cannot find name 'Input'.)
webpack: Failed to compile.

我刚刚开始使用@InputAngular 的功能，到目前为止一切都很好。我使用 Firebase 作为数据库，我调用的数据块如下所示

{
    "page_area_business_image"      : {
        "expand"    : {
            "intro" : "some info...",

            "title" : "a title"
        },
        "rebrand"   : {....},
        "newbrand"  : {....},
        "questions" : {
            "question01"    : {
                "id"        : "an ID",
                "name"      : "a name",
                "question"  : "a question",
                "answers"   : {
                    "answer01"  : {
                        "answer"    : "some answer",
                        "id"        : "an ID"
                    },
                    "answer02"  : {
                        "answer"    : "another answer",
                        "id"        : "an ID"
                    }
                }
            },
            "question02"    : {....},
            "question03"    : …