标签: angular2-components

我在angular2中启动了一个项目，但是由于某种原因，我的路线两次显示了我的组件。这是相关的代码片段。

应用程序路由

// Some import 
import { AuthComponent } from './master/auth';

const appRoutes: Routes = [
  {
    path: 'master/registration',
    component: AuthComponent
  }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { AuthComponent } from './master/auth/auth.component';

import { AppComponent } from './app.component';
import { routing } from './app.routing';

@NgModule({
  declarations: [
    // components
    AuthComponent
 ],
 providers: [
 // some providers
 ],
 imports: [
    BrowserModule,
    ReactiveFormsModule,
    routing
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.html包含<app-auth></app-auth>

auth.component.ts

import { …

我创建了一个组件来渲染我的应用程序中的SVG图像.

然而,动态加载,我的演示应用程序只显示一个更简单的版本.

http://plnkr.co/edit/g2tZXeUAMJ5zESx2EHT0?p=info

我想<div [innerHTML]="data"></div>和<div> {{ data }} </div>

虽然呼叫正确,但未加载SVG.我花了一些时间在gitter找到一个解决方案,但我得到的最接近的是它被消毒了.

我认为innerHTML正在被清理,并且插值被忽略.它只显示原始svg文本.

谢谢

我在子组件中有这个属性:

@Input() submitButtonDisabled: boolean;

在我的父组件的模板中,我使用插值通过属性绑定设置它:

<my-child-component
  [submitButtonDisabled]="{{disableSubmitButton()}}">
</my-child-component>

子组件模板以submitButtonDisabled这种方式读取其 属性:

<button id="btSubmit" type="submit" (click)="submit()" 
  [disabled]="submitButtonDisabled">Ok</button>

调试我的打字稿代码我看到属性绑定工作正常,但无论如何,提交按钮都会被禁用 disableSubmitButton返回(布尔值).似乎组件在绑定发生之前呈现.

这有意义吗？我的错误在哪里？

参考:Angular 2 - 组件通信

我的搜索字段位于单独的组件上。搜索时在建议列表上显示名称没有问题，因为我没有在其他组件中显示它们。

搜寻HTML

<input type="text" placeholder="Search" (keyup)="getSuggestion($event.target.value)">
<div class="suggestion" *ngIf="results.length > 0 && suggest === true">
     <div *ngFor="let result of results" class="search-res" (click)="showEmployee(result._id)"> {{ result.name }} </div>
</div>
<div class="suggestion" *ngIf="results.length === 0 && suggest === true">
     <div> No results found </div>
</div>

搜索组件

getSuggestion(name) {
    $('.suggestion').show();
    this.searchService
        .getSuggestion(name)
        .subscribe(
            name => this.results = name,
            error => alert(error),
        );
  }

但是，如果要在change事件中将其显示在另一个组件（列表组件）中怎么办？

我应该在输入字段中添加什么作为函数调用？并且我应该在SearchComponent中放置什么以便结果可以显示在List Component中？

SearchService

getSuggestion(name:string): Observable<any> {
        return this.http
        .get(this.serverUrl + 'name/' + name)
        .map(this.extractData)
        .catch(this.handleError);
}

这是一堂课

export class ChatDetailPage {

constructor(){

}

funcA(){
     var options = {
        onSubmit: function (text) {
        //i want to be able to access funcB from here 
        this.funcB(text)
          },
this.nativeKeyboard.showMessenger(options)
}

funcB(text){
  alert (text);
}

}

在这种情况下,我如何从Anular 2或Ionic 3中的onsubmit回调函数调用funcB.

提前致谢.