Question

我有app.component和另一个组件typeahead.component但我需要在我的appcomponent中使用typeahead输入的值来将它用于另一个选择这是我的代码：

app.component.ts：

import {Component, Inject} from 'angular2/core';
import {GridComponent} from './grid.component';
import {TestComponent} from './test.component';
import {TypeaheadComponent} from './typeahead.component';
import {SelectComponent} from './select.component';

@Component({
 selector: 'my-app',template:`

<h1>{{title}}</h1>
<div class="panel panel-primary">

    <div class="panel-heading">
    <h3 class="panel-title">
            Actions
    </h3>
  </div><div class="panel-body">     
      <div class="row">   
        <div class="col-sm-4">
            <label for="sel1">
                    Sites :  {{typeaheadOnSelect}}
            </label>
        </div>
      <div class="col-sm-4">  
         <typeahead > .. </typeahead>
      </div> 

      </div>

et typeahead.component.ts：

@Component({
selector: 'typeahead',
outputs: ['typeaheadOnSelect'],
directives: [TYPEAHEAD_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
template: `
  <div class='container-fluid'>
      <input [(ngModel)]="asyncSelected"
             [typeahead]="getAsyncData(getContext())"
             (typeaheadLoading)="changeTypeaheadLoading($event)"
             (typeaheadNoResults)="changeTypeaheadNoResults($event)"
             (typeaheadOnSelect)="typeaheadOnSelect($event)"
             [typeaheadOptionsLimit]="7"
             placeholder="Locations loaded with timeout"
             class="form-control">
      <div [hidden]="typeaheadLoading!==true">
          <i class="glyphicon glyphicon-refresh ng-hide" style=""></i>
      </div>
      <div [hidden]="typeaheadNoResults!==true" class="" style="">
          <i class="glyphicon glyphicon-remove"></i> No Results Found
      </div>
      <div> {{asyncSelected}} </div>
  </div>
 `
})
export class TypeaheadComponent {
private selected: string = '';
private asyncSelected: string = '';

Answer 1

以下是修改后的app.component.ts代码：searchChanged方法的参数是tValue.it是输入值。

app.component.ts：

    import {Component, Inject} from 'angular2/core';
    import {TypeaheadComponent} from './typeahead.component';
    import {bootstrap} from 'angular2/platform/browser';

    @Component({
        selector: 'my-app',
        directives:[TypeaheadComponent],
        template: `

            <h1>{{title}}</h1>
            <div class="panel panel-primary">

                <div class="panel-heading">
                <h3 class="panel-title">
                        Actions
                </h3>
              </div><div class="panel-body">
                  <div class="row">
                    <div class="col-sm-4">
                        <label for="sel1">
                                Sites :  {{typeaheadOnSelect}}
                        </label>
                    </div>
                 <div class="col-sm-4">
                         <typeahead ></typeahead>
                 </div>

                  </div>`,
    })
        export class AppComponents{
            public searchChanged(tValue) {
                /*tValue is value of typeahead input*/
            }
        }

bootstrap(AppComponents);

typeahead.component.ts指令：

    import {Component, Input, Output, ElementRef, EventEmitter} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import {Observable} from 'rxjs/Rx';
import {FORM_DIRECTIVES} from "angular2/common";

@Component({
    selector: 'typeahead',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
    template: `
          <div class='container-fluid'>
              <input [(ngModel)]="asyncSelected"
                     placeholder="Locations loaded with timeout"
                     class="form-control">
              <div [hidden]="typeaheadLoading!==true">
                  <i class="glyphicon glyphicon-refresh ng-hide" style=""></i>
              </div>
              <div [hidden]="typeaheadNoResults!==true" class="" style="">
                  <i class="glyphicon glyphicon-remove"></i> No Results Found
              </div>
              <div> {{asyncSelected}} </div>
          </div>
         `
})
export class TypeaheadComponent {
    private selected: string = '';
    @Output() value: EventEmitter<any> = new EventEmitter();
    public asyncSelected: string;

    constructor(private elementRef: ElementRef) {
        const eventStream = Observable.fromEvent(elementRef.nativeElement,    'keyup')
            .map(() => this.asyncSelected)
            .distinctUntilChanged();

        eventStream.subscribe(input => this.value.emit(input));
    }
}

的index.html

<!DOCTYPE html>
<html>
<head>
  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/typescript/lib/typescript.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
  <script src="/node_modules/angular2/bundles/http.dev.js"></script>
</head>
<body>
  <my-app>Loading...</my-app>

  <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {emitDecoratorMetadata: true},
      packages: {app: {defaultExtension: 'ts'}}

    });
    System.import('app/app.component');
  </script>
</body>
</html>

如何从其他组件返回一个typeahead元素

1 个答案: