小编mpr*_*pro的帖子

在我的一个Angular 2路线的模板(FirstComponent)中,我有一个按钮

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

我的目标是实现:

按钮单击 - >路由到另一个组件,同时保留数据,而不使用其他组件作为指令.

这就是我试过的......

第一种方法

在同一视图中,我存储基于用户交互收集相同的数据.

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

一般情况下我路由SecondComponent通过

 this._router.navigate(['SecondComponent']);

最终传递数据

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

而带参数的链接的定义是

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', …

可以通过@Input将数据从父节点发送给子节点,或者通过@Output从子节点调用父节点上的方法,但是我想完全相反,这就是调用方法来自父母的孩子.基本上是这样的:

@Component({
  selector: 'parent',
  directives: [Child],
  template: `
<child
  [fn]="parentFn"
></child>
`
})
class Parent {
  constructor() {
    this.parentFn()
  }
  parentFn() {
    console.log('Parent triggering')
  }
}

和孩子:

@Component({
  selector: 'child',
  template: `...`
})
class Child {
  @Input()
  fn() {
    console.log('triggered from the parent')
  }

  constructor() {}
}

背景是一种"获取"请求,即从孩子获得最新状态.

现在我知道我可以通过服务和Subject/Observable实现这一点,但我想知道是否有更直接的东西？

我正在尝试使用ngFor我的select DropDownList.已加载应该在下拉列表中的选项.

你在这里看到的代码:

<div class="column small-12 large-2">
    <label class="sbw_light">Title:</label><br />
    <select [(ngModel)]="passenger.Title">
       <option *ngFor="#title of titleArray" [value]="title.Value">{{title.Text}}</option>
    </select>
</div>

根据此代码,它会生成一个看起来像这个图像的下拉列表.

问题是,我想将其中一个"先生或太太"设置为活跃的,基于passenger.Title"先生"或"太太"的字符串.

任何人都可以帮忙看看我在这里做错了什么？

我的模块.ts,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule,Router }   from '@angular/router';
import { AppComponent }  from './crud/app.component';
import { Profile }  from './profile/profile';
import { Mainapp }  from './demo.app';
import { Navbar }  from './header/header';
// import {ToasterModule, ToasterService} from 'angular2-toaster';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({

  imports:      [ BrowserModule,FormsModule, ReactiveFormsModule ,
  RouterModule.forRoot([
      { path: '', component:AppComponent},
      { path: 'login', component:AppComponent},
      { path: 'profile', component:Profile}
    ]) ],
  declarations: [ AppComponent,Mainapp,Navbar,Profile …

我有产品界面：

export interface Product{
  code: string;
  description: string;
  type: string;
}

使用方法调用产品端点的服务：

  public getProducts(): Observable<Product> {
    return this.http.get<Product>(`api/products/v1/`);
  }

我使用此服务获取产品的组件。

export class ShopComponent implements OnInit {
    public productsArray: Product[];

    ngOnInit() {
        this.productService.getProducts().subscribe(res => {
          this.productsArray = res;
        });
    }
}

在这种状态下，我得到了错误：

[ts]类型“产品”缺少类型“产品[]”中的以下属性：长度，弹出，推入，连续和另外26个。[2740]

删除productsArray变量上的类型可消除该错误，但不知道为什么此方法不起作用，因为服务器响应是类型为Products？的对象数组。

我需要声明这个变量来输入任何？这显示在我的HTML模板中的可视代码编辑器中.

产品form.component.html

<div class="row">

  <div class="col-md-6">
      <form #form="ngForm" (ngSubmit)="save(form.value)">

            <div class="form-group">
              <label for="title">Title</label>
              <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>
              <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                Title is required.
              </div>
            </div>

            <div class="form-group">
                <label for="price">Price</label>
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input #price="ngModel" ngModel [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" required [min]="0">
                </div>
                <div class="alert alert-danger" *ngIf="price.touched && price.invalid">
                  <div *ngIf="price.errors.required">Price is required.</div>
                  <div *ngIf="price.errors.min">Price should be 0 or higher.</div>
                </div>
            </div>

            <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel" ngModel [(ngModel)]="product.category" name="category" id="category" …

我正在使用带有Reactive表单的Angular 5,并且需要使用valueChanges来动态地禁用所需的验证

组件类:

export class UserEditor implements OnInit {

    public userForm: FormGroup;
    userName: FormControl;
    firstName: FormControl;
    lastName: FormControl;
    email: FormControl;
    loginTypeId: FormControl;
    password: FormControl;
    confirmPassword: FormControl;
...

ngOnInit() {
    this.createFormControls();
    this.createForm();
    this.userForm.get('loginTypeId').valueChanges.subscribe(

            (loginTypeId: string) => {
                console.log("log this!");
                if (loginTypeId === "1") {
                    console.log("disable validators");
                    Validators.pattern('^[0-9]{5}(?:-[0-9]{4})?$')]);
                    this.userForm.get('password').setValidators([]);
                    this.userForm.get('confirmPassword').setValidators([]);

                } else if (loginTypeId === '2') {
                    console.log("enable validators");
                    this.userForm.get('password').setValidators([Validators.required, Validators.minLength(8)]);
                    this.userForm.get('confirmPassword').setValidators([Validators.required, Validators.minLength(8)]);

                }

                this.userForm.get('loginTypeId').updateValueAndValidity();

            }

        )
}
createFormControls() {
    this.userName = new FormControl('', [
        Validators.required,
        Validators.minLength(4)
    ]);
    this.firstName = new FormControl('', …

我正在尝试为Angular 2应用程序设置我自己的本地开发环境,而不使用Angular 2 站点或Angular CLI中提到的QuickStart种子,因为它们往往带有我并不真正需要的额外文件.

现在,一切都很顺利,除了我不知道如何使用NPM获得Angular 2.我尝试过使用,npm install angular2 --save但我发现angular2已被弃用,并且是预发布版本.所以我想如何使用NPM获取最新的Angular 2.0插件,如果可能的话呢？

我基于Angular2教程创建了一个非常简单的应用程序.

首先,我有一个非常简单的"书"模型:

 /**
 * book model
 */
export class Book {
    public data;

    /**
     * constructor
     * @param id
     * @param title
     * @param pages
     */
    constructor(
        public id,
        public title:string,
        public pages:Array
    ){
        alert('it works'); // just a check
    }
}

在我的服务中,我得到了这样一本书:

return this._http.get('getBook/1')
        .map(function(res){
            return <Book> res.json();
        })

我的期望是,这将获得生成的JSON数据并将其"映射"到Book对象.

但是,它只返回一个类型为"Object"的对象.

我可以自己创建一个新的Book对象并在构造函数中传递参数,如下所示:

return new Book(res.id, res.title, res.pages);

这是最好的方法吗？我错过了什么？

我正在寻找Angular 4中的解决方案来获取DOM元素的宽度而不采取任何操作(单击或窗口调整大小),只是在页面加载后,但在我开始绘制svg之前.我在这里找到了类似的案例,但它对我不起作用.我犯了同样的错误:

错误TypeError:无法读取未定义的属性"nativeElement"

我需要获取div容器的宽度来设置svg的veiwbox我正在其中绘制.

这是模板:

<div id="what-is-the-width" class="svg-chart-container">
    <svg [innerHTML]="svg"></svg>
</div>

和TS文件在这种情况下需要的东西:

import { Component, Input, OnInit, ViewEncapsulation, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class SvgChartComponent implements OnInit {

  @ViewChild('what-is-the-width') elementView: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    console.log(this.elementView.nativeElement);
  }

  ngOnInit() {
    //this method gets the data from the server and draw the svg
    this.getSVGChartData();
  }
}

有没有人有想法如何让这个工作？