标签: angular2-components

我试着按照这个答案,但它太混乱的Angular 2事件在兄弟组件之间捕捉

我想在子组件2上单击某个东西时调用子组件1中的方法

子组件2发出一个名为trackClick的事件.

父组件:

<div>

    <audio-player></audio-player>

    <audio-albums></audio-albums>

</div>

子组件1(音频播放器)

// Don't know what to do here, want to call this function

trackChanged(track){
    console.log("YES!! " + track);
}

儿童组件2(音频专辑)

<li class="track" (click)="playTrack(track)"> </li>

@Output() trackClick = new EventEmitter<any>();

playTrack(track):void{
    console.log("calling playTrack from child 2:" + track);  
    this.trackClick.next([track]);
}

我最近尝试使用角度2创建自己的自定义表单控件.自定义控件应该有2个输入,并编辑具有已知结构的现有对象.例如:

class model {
    public fieldOne: number;
    public fieldSec: number;
}

我遵循了我在这里找到的好解释: 编写自定义表单控件的指南

它工作正常,除了指南没有提到如何将自定义控件表单验证连接到使用它的表单.让我们看一个简化的例子:

自定义控件模板看起来像这样:

<form>
    <input [(ngModel)]="existingModel.fieldOne">
    <input [(ngModel)]="existingModel.fieldSec" required>
</form>

我们用它来编辑现有的模型,其值为:

{
    fieldOne: 20,
    fieldSec: undefined
}

我们在我的应用程序中以某种形式使用它,我们需要自定义控件来编辑此模型:

<form #formVar="ngForm">
    <my-custom-control [(ngModel)]="existingModel" required>
    </my-custom-control>
</form>

在我可以编辑模型的问题上,这种示例适用于我的应用程序.问题是我希望在表单无效时向用户显示,如果我查看formVar.valid,即使existingModel.fieldSec未定义并且在自定义控件表单中对其进行了必需的验证,它也将为true .

我很难让模块在Angular 2中工作.我已经创建了一个演示问题的插件.在插件中,你会看到我有app.module.该模块导入app-common.module,其中包含一个显示页眉的组件.顶级组件的模板app.component包含此组件的选择器.这是app.common.module:

@NgModule({
imports:[CommonModule, FormsModule],
declarations: [PageHeaderComponent]
})
export class AppCommonModule { }

这是app.module:

@NgModule({
imports:      [AppCommonModule, BrowserModule],
declarations: [AppComponent ],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

运行应用程序时,它会抛出一个错误,"ref-pageheader"不是已知元素.如果我在app.module中声明组件,它可以正常工作.那么,为什么我不能在导入到主app.module的模块中声明这个组件？看来Angular在完成后无法找到它.我究竟做错了什么？我错过了什么吗？

对不起,如果这个问题是重复的话.我无法在网上找到任何合适的解决方案,所以我在这里发帖.

我正在创建一个角度为2的组件.我有一个外部的js文件并动态加载它.在外部js文件中,我有一个带参数的函数.我如何调用该参数ngAfterViewInit.我是Angular 2的新手,所以不知道如何在Angular 2打字稿中调用js函数,我会发布我的代码供你参考

app.component.ts

import { Component, OnInit, ElementRef,AfterViewInit  } from '@angular/core';
declare var $:any;
@Component({
  selector: 'app-root',
  template: '<div></div>'
})

export class AppComponent implements AfterViewInit {
 urlinput;  
  constructor(elRef: ElementRef){
    this.urlinput = elRef.nativeElement.getAttribute('urlinput');
    this.loadScript();
  }
     ngAfterViewInit() {
  // need to call the js function here 
  //tried like this initializeDataTable(this.urlinput) not worked
  }

loadScript() {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "app/Message.js";
    head.appendChild(script);
}  
}

Message.js(外部Js文件)

function initializeDataTable(dTableURL){
        $.ajax({
                "url": dTableURL, …

我需要将数据从一个组件传递到另一个组件,我发现只有在url中使用路由参数的方法:

所以我对路由器中的目标组件进行了这样的配置:

{
    path: 'edit-tags/:type/:name/:id',
    component: EditTagsComponent,
},

我使用它来自另一个组件:

this.router.navigate([`../edit-tags/${product.type}/${product.name}/${product.id}`], { relativeTo: this.route });

它工作正常,但我不想id在url中显示,还需要将更多数据传递给组件.

我也见过在路由器中使用这样的配置:

{ path: 'test-product', component: ProductsContentComponent, data: { role: 'admin', type: 'test-product' } }

但我没有找到在另一个组件中使用相同方法的示例.

那么,有没有办法在路由中将一些数据从组件传递到组件而不在URL中反映它？

我有一个组件，其中包含四个可能的样式文件，这些文件可以根据某些变量来应用。如何在渲染之前应用该组件的样式？

@Component({
    selector: 'settings-editor',
    templateUrl: './settings-editor.component.html',
    styleUrls: [ './a.less', './b.less' , './c.less' ]
})
export class SettingsEditorComponent implements OnInit {
   @Input()
   public styleType: string;


   ngOnInit() {
     if (this.styleType === 'A') { 
        // Apply styles  from a.less only

     } 
   }


}

问题：

@ContentChildren似乎不适用于父<ng-content>容器。即使内容是该组件的子代。

Plunker：https ://plnkr.co/edit/J5itJmDfwKwtBsG6IveP ? p = preview

注意：我正在使用{descendants: true}

示例代码：

主要HTML：

<div>
  <child>
    <test></test>
    <test></test>
    <test></test>
  </child>
  <br><br>
  <parent>
    <test></test>
    <test></test>
    <test></test>
  </parent>
</div>

子组件：

<h2>Child</h2>
<parent>
  <ng-content></ng-content>
</parent>

父组件：

<h3>Parent</h3>
<ng-content></ng-content>
<div class='length'>Line count : {{length}}</div>

问题test对于子组件，组件 的长度为0，对于父组件，组件的长度为3。

详细代码：

import {
  Component, ContentChildren, Directive
} from '@angular/core';


@Directive({selector: 'test'})
export class Test {}

@Component({
  selector: 'parent',
  template: `
    <h3>Parent</h3>
    <ng-content></ng-content>
    <div class='length'>Line count : {{length}}</div>
  `
})
export class ParentComponent  { …

我一直在尝试用Angular2实现一个简单的ngFor,但我不知道导致错误的错误'Generic TYpe Array需要一个参数.喜欢

import { Component } from '@angular/core';


    @Component({
        selector: 'my-app',
        templateUrl:'./app.component.html',                     
    })
    export class AppComponent { 
           clients:Array;
           doctors:Array;
            constructor(){
               this.clients=["Client1", "Client2", "Client3"];
                this.doctors=["Doctor1","Doctor2","Doctor3"];
            }


    }

我正在寻找一个关于为什么使用@Output事件比@Input在Angular 2+中传递函数更好的论据.

使用@Input:

父模板:

<my-component [customEventFunction]=myFunction></my-component>

在parent-component.ts中:

myFunction = () => {
  console.log("Hello world")
}

在my-component.ts中

@Input() customEventFunction: Function;

someFunctionThatTriggersTheEvent() {
  this.customEventFunction();
}

使用@Output:

父模板:

<my-component (onCustomEvent)=myFunction()></my-component>

在parent-component.ts中:

myFunction() {
  console.log("Hello world")
}

在my-component.ts中

@Output() onCustomEvent: EventEmitter<any> = new EventEmitter<any>();

someFunctionThatTriggersTheEvent() {
  this.onCustomEvent.emit();
}

两者都实现了相同的目标,但我认为这种@Output方法比我在其他Angular包中看到的更为典型.有人可能会说,使用输入,如果只能有条件地触发事件,您可以检查函数是否存在.

思考？

我是Angular 2的新手.我正在从AngularJS升级我的应用程序,现在我正处于UI/UX开发的最后阶段.我有一个需要帮助的最后一个问题.先感谢您.

当前计划

1. 我有一个自定义指令TspFieldWidgetDirective,它接受多个输入,一个是函数@Input('onRefresh') public refresh: Function;.
2. 所述TspFieldWidgetDirective元件可以各种组件的内部使用重新设计标准的表单字段.
3. 我使用current指令作为TspHeaderComponent模板中的选择框.
4. 当用户更改选择框的值时,将OnRefresh调用该函数以刷新应用程序以更新新公司的视图.

什么不起作用

1. 每次在浏览器中加载TspHeaderComponent模板时,它会产生对OnRefresh函数onCompanyChange的无限循环调用,当它只应被调用一次时,当选择框更改值时.

2. 当我从浏览器更改选择框的值时(在TspFieldWidgetDirective模板中 - (change)="refresh({'id': fieldData[fieldKey]})",会生成以下错误. ERROR TypeError: _co.refresh is not a function

请注意

1. 该功能在Angular 5中从未起作用,它在AngularJS中运行得非常好.
2. 除了将函数作为指令的输入传递外,其他所有工作都有效.

代码片段如下:

tsp-header.component.ts

/*
    Method to change company of the company selector

    @param: id - string
    @return: none
 */
public onCompanyChange(id: string): void {
    if ((__env.debug && __env.verbose)) {
        console.log('Setting current_company_id to ' + …