angularV4 +の研究ノート

研究ノートの記事の角度成分

1件のコメント

1.1コンポーネントのコメント

@Componentアノテーション、コンポーネントの構成。

1.1.1メタデータ注釈@Component

• selector
• template/templateUrl
• inputs/outputs
• host
• styleUrls

セレクタ：セレクタ

ときにページ・レンダリング、Angularコンポーネントマッチングセレクタ

使用します。

    
<ip-address-form></ip-address-form>

htmlタグを経由して。
「角度権限」過程で、別の説明は、<div ip-address></div>この規則セレクタと一致するルールと一致して、セレクタは、実際のシーンに応じて、クラスであってもよいです。（理想でTSLintの導入後、プログラムが正常に実行することができますが、エディタは警告する、警告およびプロンプトの除去プログラム）

例えば：

@Component({
  selector: '.app-single-component',
  template: `
  <div>
    这个是子组件 ：{{name}}
    <button (click)="sendMessage()" >点我</button>
  </div>
  `
})

templdate / templdateUrl：テンプレート/テンプレートパス

具体的にはHTMLアセンブリテンプレートtemplateテンプレートとしてtemplateUrlテンプレートパス。
templateサポートではes6抗引用符の、複数行の書き込みは、templdateUrl構成するために使用されるhtmlパステンプレートを。

注：ではTypescript、コンストラクタだけを可能にし、これはそれでes6の違い

入力/出力：入力/出力

理解されるように、入力および出力アセンブリ、コンポーネントデータは、親コンポーネントにコンポーネントからのデータ出力に入力されます。

入力の使用：[变量名]、ページ内の親要素で、@Input()サブアセンブリでclass次のコード例で使用されます。

シングルcomponent.component.ts

@Component({
      selector: 'app-single-component',
      template: `
          <div>
            这个是子组件 ：{{name}}
          </div>
          `
        })
export class SingleComponentComponent implements OnInit {

  @Input () name: string ;

  ngOnInit () {
  }

}

app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <div>
      <app-single-component [name]="simple"></app-single-component>
  </div>
  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = '我的世界';
  }
}

メタデータ@Componentとして入力し、書き込みする別の方法が存在であり、出力はまた、一貫しています

どこにコードの一部

@Component({
  selector: 'app-single-component',
  inputs:['name'],
  template: `
  <div>
    这个是子组件 ：{{name}}
  </div>
  `
})

出力は使用：放送/サブスクリプションを介して、おそらく出力がより適切です。

シングルcomponent.component.ts改

@Component({
  selector: 'app-single-component',
  template: `
  <div>
    这个是子组件 ：{{name}}
    <button (click)="sendMessage()" >点我</button>
  </div>
  `
})
export class SingleComponentComponent implements OnInit {

  value: string;
  @Input () name: string ;
  @Output() emotter: EventEmitter<string>;

  ngOnInit () {
  }

  constructor () {
    this.value = '来源于组件的值';
    this.emotter = new EventEmitter<string>();
  }

  sendMessage (): void {
    this.emotter.emit(this.value);
  }

}

app.component.ts改

@Component({
  selector: 'app-root',
  template: `
    <div>
      <app-single-component [name]="simple" (emotter)="getComponentData($event)"></app-single-component>
  </div>
  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = '我的世界';
  }

  getComponentData (message: string): void {
     console.log(`获取到子组件中的值：${message}`);
  }
}

ホスト：要素のエレメント列が配置属性

JSON目標値key-value、およびだけ追加するために使用される現在の内部コンポーネントに作用を働きますclass。

styleUrls：カスケーディングスタイルシートのURL、グループの中央値は、複数を渡すことができます。

もちろん必要に応じて、使用することを必要としているcomponentモジュールの導入を：

@NgModule({
  declarations: [
    AppComponent,
    SingleComponentComponent // 引入的指令，放在声明里面
  ],
  imports: [
    BrowserModule // 引入的模块
  ],
  providers: [],
  bootstrap: [AppComponent] //引导应用的根组件
})
export class AppModule { }

@Componentに関するメタデータは完全に、その背中は改善していきますではありません。

Gitのソースコードアドレス