标签: angular2-components

在角度2中,是否可以手动实例化组件A,然后将其传递并在组件B的模板中渲染？

我想在Ionic 2中的一个页面中使用FormBuilder.

首先,这是我的环境细节:在Windows 10上运行,并运行ionic --version给我2.0.0-beta.35

这是我的package.json文件的一部分:

...
"@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/forms": "^0.3.0",
"@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"ionic-angular": "2.0.0-beta.10",
"ionic-native": "1.3.2",
"ionicons": "3.0.0"
...

其次,这是涉及的两个主要文件:

insight.ts

import { Component } from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import {
  REACTIVE_FORM_DIRECTIVES,
  FormBuilder,
  FormControl,
  FormGroup
} from '@angular/forms';
import { App, Insight } from '../../models';
import { InsightProvider } from '../../providers/insight/insight.service';
import { InsightImage, InsightLabel, InsightLink, InsightQuestion, InsightThought, InsightTodo, InsightVideo } from './shared'; …

是)我有的:

我正在构建一个离子2应用程序,并构建了一个包含的基本角度2组件

• 输入字段

• 用于显示输入标题的标签

• 用于显示任何验证错误的标签

我将此称为我的输入组件

我有一个页面组件,上面有一个表单,目前有文本输入.1个常规输入(密码)和1个输入包装在我的输入组件(用户名)中.

这是我的页面组件的相关部分

ngOnInit() {
  this.loginForm = this.formBuilder.group({
    username: ['', Validators.required],
    password: ['', Validators.required]
  });
}

这是页面组件模板

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

  <!-- My input component -->
  <aw-input-text id="username" name="Username" [formInput]="loginForm.controls.username"></aw-input-text>

  <!-- A standard input control -->
  <ion-item [class.error]="loginForm.controls.password.errors">
    <ion-label floating>Password</ion-label>
    <ion-input type="text" value="" name="password" formControlName="password"></ion-input>
    <p *ngIf="loginForm.controls.password.errors">This field is required!</p>
  </ion-item>

  <button type="submit" class="custom-button" [disabled]="!loginForm.valid" block>Login</button>

</form>

这是我输入组件的模板

<!-- Component template -->
<form [formGroup]="formGroup">
    <ion-item>
        <ion-label floating>{{inputName}}</ion-label>
        <ion-input type="text" formControlName="inputValue"></ion-input>
        <p *ngIf="!formGroup.controls.inputValue.valid">This field is required!</p>
    </ion-item> …

我刚刚开始潜入Angular 1.5来自Angular 1.5.我正在处理用户路由并将API数据从服务中提取到用户组件中.

与1.*中的控制器不同,组件似乎保持静态,在每个请求中刷新它们.

无论如何要在每个新路由请求上调用ngOnInit函数吗？

我的用户组件类:

// url structure: /user/:id
export class UserComponent implements OnInit {

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {

      // doesn't log new id on route change
      let id = this.route.snapshot.params['id'];
      console.log(id);

      this.route.params
        .switchMap(params => this.userService.getUser(params['id']))
        .subscribe(user => {
          // logs new id on route change
          let id = this.route.snapshot.params['id'];
          console.log(id);

          this.user = user
        });
    }
}

更新:

找到了一个我觉得最适合我的方案的解决方案.根据我的问题和进一步调查的几个答案和评论,订阅路线似乎是要走的路.这是我更新的组件:

export class UserComponent {

  user;
  id;

  constructor(
    private userService: UserService,
    private route: ActivatedRoute
  ) {}


  ngOnInit() { …

我正在做的事情:

1. 动态创建组件(完成)
2. 允许动态创建的组件利用"输出",以便父组件可以侦听子组件的更改.

这是我正在尝试做的一个Plnkr.Plnker - > https://plnkr.co/edit/XpDCGIwd2at9oR74lpY5?p=preview

当用户单击"+组件"时,以下内容将创建组件

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
let ref = this.container.createComponent(componentFactory);

在添加的每个子组件中,当用户单击"Fire Event"时

<span class="initiateParentAction" 
  (click)="fireEventEmitter()" [class.eventFired]="eventFired==true">Fire Output Event: {{eventFired}}</span>

它称之为以下

fireEventEmitter(){
    console.log("Event Fired");
    this.parentActionReq.emit({
      action: "helloWorld"
    });
    this.eventFired = true;
    setTimeout(() => this.eventFired=false, 2000);
}

父组件(在本例中为"App"组件)正在侦听这些输出,如此处所示

<ng-container #container 
    (parentActionReq)="childActionInitiated($event)"></ng-container>

我无法从动态创建的组件中获取事件以向父级注册.在Plnker中,"Received child output Event"应该变为true.

在这一点上,我认为由于这些组件是在运行时添加的,我需要以某种方式重新初始化事件检测OnInit.但没有取得进展.

任何建议,提示,指导将在这里表示赞赏.

我对于创建我自己的Observables的道路犹豫不决,因为这似乎是重新创建了轮子,输出完全符合我的目的.

非常感谢你.

我一直在寻找这种行为的原因,子组件'Param'中的Input()属性的值没有在正确的时间更新,我需要使用更新的值来调用服务作为参数.通过单击"更新子值"按钮,首先显示LOG B(使用旧值),然后显示LOG A(LOG A位于属性的设置器中).

父组件

@Component({
  selector: 'parent',
  template: `
     <child #child [param]="parentParam"></child>
     <button (click)="updateChildValue()">Update child value</button>
`})
export class Parent {
  @ViewChild('child') child: Child;
  public parentParam: number;

  public updateChildValue() {
    this.parentParam = 9;
    this.child.showParam();
  }
}

儿童组成部分

@Component({
   selector: 'child',
   template: '' })

export class Child {

   private _param: number;

   public get param() : number {
       return this._param;
   }

   @Input('param')
   public set param(v : number) {
      this._param  = v;
      console.log('LOG A');
      console.log(this.param);        
   }

   public showParam() {
      console.log('LOG B');
      console.log(this.param); …

我需要访问父DOM元素的一些属性,其中包含我想要获取信息的组件,有没有办法做这样的事情？

以下是我的组件的样子:

import { Component, Input } from "@angular/core";

import "./loadingSpinner.component.css!";

    @Component({
        selector: "loading-spinner",
        template: `
            <div *ngIf="showSpinner" class="loader-directive-wrapper">
                <div class="loader"></div>
            </div>`
    })
    export class LoadingSpinnerComponent {
        @Input() public showSpinner: boolean = false;
    } 

如何从父组件以及子路由获取RouteParams

export const routes: Routes = [
    { path: '', redirectTo: 'list', pathMatch: 'full' },
    { path: 'list', component: UsersComponent },
    {
        path: ':id', component: UserDetailComponent,
        children: [
            // { path: '', redirectTo: 'overview', pathMatch: 'full' },
            { path: 'overview', component: UserInfoComponent },
            { path: 'specs/:id', component: UserProfileComponent }
        ]
    }
];

在组件中

export class UserDetailComponent implements OnInit { 

constructor(private route: ActivatedRoute) { }
  ngOnInit() {
  this.route.parent.params.subscribe( (c) => {
        console.log(c['id']);
    });
    this.route.params.subscribe(params => {
      console.log(params['id']);
    });
}
}

但是当我的路线被激活时,我总是得到不确定.请帮助解决这个问题？ …

我最近使用angular 2创建了一个简单的项目.当我尝试向app.component添加一个指令组件时,'directives'属性有一个红色下划线.谁有人告诉我这里有什么问题？

我有一个带有ParentComponent的Ionic 2应用程序,调用ChildComponent @ViewChild方法来启动多个ChildComponents.其中一个ChildComponents在视图中使用不同的参数实例化两次,如下所示:

<ChildComponent [startFrom]="0" [limitTo]="1"></ChildComponent>
<ChildComponent [startFrom]="1" [limitTo]="1"></ChildComponent>

在离线/在线设备状态更改后,我调用ChildComponent的方法来更新它返回的项目列表.

@ViewChild(ChildComponent) childComponent: ChildComponent;

ngOnInit(): void {
    this.networkService.connectSubscription(() => {
        this.childComponent.getItems();
    });
}

这里的问题this.childComponent只是获取两者的第一个ChildComponent实例.

有没有办法通过相同@ViewChild组件的多个实例进行迭代,所以我可以做这样的事情this.childComponent1.getItems()和this.childComponent2.getItems()？

谢谢你的帮助.