angularV4 + study notes

angular component of the study notes articles

1 comment

1.1 Components comment

@ComponentAnnotation, the component configuration.

1.1.1 metadata annotation @Component

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

selector: selector

When page rendering, Angularcomponent matching selector,

Use:

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

By way of html tags.
In "the Angular authority" Course, another explanation, <div ip-address></div>this is consistent with the rule match the rule selector, the selector may be a class, in accordance with the actual scene. (After the introduction of TSLint in Ideal, the program can run normally, but the editor will warn, warning and prompt elimination program)

E.g:

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

templdate / templdateUrl: template / template path

Specifically html assembly template templateas a template templateUrlfor the template path.
templateIn support es6of the anti-quotation marks, multi-line writing, templdateUrlused to configure the htmlpath template.

Note: In the Typescriptconstructor allows only one, and this is it es6's a difference

inputs / output: Input / Output

Input and output assembly, as will be appreciated, the component data is input to the data output from the component to the parent component.

Input use: [变量名], in the parent element in the page, @Input()in the sub-assembly classused in the code example below:

single-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 = '我的世界';
  }
}

Wherein the input as metadata @Component, then there is another way to write, then the output is also consistent

Where a piece of code

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

Output used: output perhaps by way of broadcast / subscription is more appropriate.

single-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}`);
  }
}

host: for element attributes element row arranged

Json target value key-value, and acting only acts on the current internal components, used to add class.

styleUrls: Cascading Style Sheets url, the median value of the group, can pass a plurality.

Of course necessary, in the need to use the componentmodule's introduction:

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

Metadata about @component not completely, so the back will continue to improve.

Git source code address