标签: angular

我正在处理登录表单,如果用户输入无效凭据,我们要将电子邮件和密码字段都标记为无效,并显示一条消息,指出登录失败.如何从可观察的回调中将这些字段设置为无效？

模板:

<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm">
  <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch">
    <md-input-container>
      <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email">
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password">
    </md-input-container>
    <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p>
    <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center">
     <md-checkbox class="remember-me">Remember Me</md-checkbox>
      <a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a>
    </div>
    <button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button>
     <p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p>
   </div>
 </form>

登录方式:

 @ViewChild('loginForm') loginForm: HTMLFormElement;

 private login(formData: any): void {
    this.authService.login(formData).subscribe(res => …

我想为已经部署在Angular 2中的一些组件创建扩展,而不必几乎完全重写它们,因为基本组件可能会发生更改,并希望这些更改也反映在其派生组件中.

我创建了这个简单的例子,试图更好地解释我的问题:

使用以下基本组件app/base-panel.component.ts:

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'base-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class BasePanelComponent { 

  @Input() content: string;

  color: string = "red";

  onClick(event){
    console.log("Click color: " + this.color);
  }
}

您是否只想更改另一个衍生组件,例如,在示例颜色的情况下,基本组件行为app/my-panel.component.ts:

import {Component} from 'angular2/core';
import {BasePanelComponent} from './base-panel.component'

@Component({
    selector: 'my-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class MyPanelComponent extends BasePanelComponent{

  constructor() { …

我正在学习角度2,并且我第一次使用角度CLI项目来创建沙箱项目.

我能够运行命令"ng serve"并且效果很好.我想阻止它运行,所以我跑了"控制Z".

当我再次尝试运行"ng-serve"命令时,它给出了"端口4200已经在使用中".

我运行"PS"来获取PID的列表并杀死了角度cli的PID并再次运行"ng-serve"仍然它给出了相同的端口使用错误.

ng-container 在Angular 2文档中提到但没有解释它是如何工作的以及用例是什么.

它是在特别提及ngPlural和ngSwitch指令.

是否<ng-container>做同样的事情<template>,或者它取决于是否编写了一个指令来使用其中一个？

是

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

和

<template [ngPluralCase]="'=0'">there is nothing</template>

应该是一样的吗？

我们如何选择其中一个？

如何<ng-container>在custom指令中使用？

打字稿代码:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }

}

错误信息:

错误TS2307:找不到模块'rxjs-compat/Observable'.node_modules/rxjs/observable/of.d.ts(1,15):错误TS2307:找不到模块'rxjs-compat/observable/of'.src/app/hero.service.ts(2,10):错误TS2305:模块'"F:/ angular-tour-of-heroes/node_modules/rxjs/Observable"'没有导出成员'Observable'.src/app/hero.service.ts(15,12):错误TS2304:找不到名称'of'.

package.json Angular版本的文件:

在Angular 2中将用户重定向到完全外部URL的方法是什么.例如,如果我需要将用户重定向到OAuth2服务器以进行身份​​验证,我该怎么做？

Location.go(),Router.navigate()并且Router.navigateByUrl()可以将用户发送到Angular 2应用程序中的另一个部分(路由),但我看不出它们如何用于重定向到外部站点？

我在该组件中有一个Angular2组件,它当前有一些字段,在它们之前应用@Input()以允许绑定到该属性,即

@Input() allowDay: boolean;

我想要做的是实际使用get/set绑定到一个属性,这样我就可以在setter中做一些其他的逻辑,如下所示

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
set allowDay(value: boolean) {
     this._allowDay = value;
     this.updatePeriodTypes();
}

我如何在Angular2中做到这一点？

根据Thierry Templier的建议我将其更改为,但是抛出错误无法绑定到'allowDay',因为它不是已知的本机属性:

//@Input() allowDay: boolean;
_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
@Input('allowDay') set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

我正在使用angular 5.0.3,我想用一堆查询参数启动我的应用程序.比如"/ app？param1 = hallo¶m2 = 123".在如何从angular2中的url获取查询参数中给出的每个提示？不适合我.

任何想法如何获取查询参数的工作？

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

这个私有函数可以帮助我获取参数,但我不认为它是新Angular环境中的正确方法.

[更新:]我的主应用程序看起来像@Component({...})导出类AppComponent实现OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

当我尝试在生产环境中构建我的角度项目时：

ng build --prod --aot

控制台返回此错误：

Error: Unknown argument: prod

ng serve工作正常，ng build没有参数似乎也可以工作。为什么 Angular 会返回这样的错误？

我的组件具有依赖于当前日期时间的样式.在我的组件中,我有以下功能.

  private fontColor( dto : Dto ) : string {
    // date d'exécution du dto
    let dtoDate : Date = new Date( dto.LastExecution );

    (...)

    let color =  "hsl( " + hue + ", 80%, " + (maxLigness - lightnessAmp) + "%)";

    return color;
  }

lightnessAmp是从当前日期时间计算的.如果dtoDate是在过去24小时内,颜色会发生变化.

确切的错误如下:

检查后表情发生了变化.先前价值:'hsl(123,80%,49%)'.当前价值:'hsl(123,80%,48%)'

我知道只有在检查值时才会在开发模式中出现异常.如果选中的值与更新的值不同,则抛出异常.

所以我尝试在以下钩子方法中更新每个生命周期的当前日期时间以防止异常:

  ngAfterViewChecked()
  {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
  }

......但没有成功.