标签: angular5

目前正在进行Angular5课程,经过一段时间的研究后,我仍然完全不了解以下内容:

码:

App.component.html:

      <app-server-element 
      *ngFor="let serverElement of serverElements"
      [element]="serverElement"
       ></app-server-element>

App.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name:'Testserver',content:'just a test!'},
                    {type: 'server', name:'Testserver',content:'just a test!'}
];  
   }

服务器element.component.html:

  <p>
    <strong *ngIf="element.type === 'server'" style="color: red">
{{ element.content }}</strong>
    <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em>
  </p>

服务器element.component.ts:

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

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent …

我正在使用ngTemplateOutlet加载。但是它会多次加载模板。正在加载正确的模板，但会多次执行loadTemplate（）方法。

在HTML中：

<table>
    <thead>
    </thead>
    <tbody>
        <ng-template [ngTemplateOutlet]="loadTemplate()"></ng-template>
    </tbody>
</table>

<ng-template #template1>
    <tr *ngFor="iteration">
        <p>Hiii</p>
    </tr>
</ng-template>

<ng-template #template2>
    <tr *ngFor="iteration">
        <p>Byee</p>
    </tr>
</ng-template>

在我的component.ts中：

@ViewChild('template1') template1: TemplateRef<any>;
@ViewChild('template1') template1: TemplateRef<any>;
loadTemplate(){
    if (condition)
        return this.template1;

    return this.template2;
}

我已经检查了堆栈上的流程答案,但是它们似乎都没有相关性,我创建了两个组件page1和page2.并在module.ts中声明了一条路线

     import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Route, RouterModule} from '@angular/router'


import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';


@NgModule({
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path:'page1', component:Page1Component},
      {path:'page2', component:Page2Component}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的page1 html如下所示

<p>
  page1 works!

<button (click)= 'OnbtnClick()'>Route to Page2</button>
</p>

组件ts如下

import { Component, OnInit …

我创建了这样的课程

@Injectable FooService {

    constructor(private _bar:BarService){

    }
}

并像这样扩展它

@Injectable ExtFooService extends FooService {

    constructor(private _bar:BarService){
        super(_bar);
    }
}

这样，我得到以下错误：

错误：（12、14）TS2415：Class'ExtFooService'错误地扩展了基类'FooService'。类型具有私有属性“ _bar”的单独声明。

为什么？

我试着从ExtFooService中删除注入，但是我得到了这一点super()：

错误：（21，9）TS2554：期望2个参数，但得到0。

我真的有必要这样做吗？

@Injectable ExtFooService extends FooService {

    constructor(private _extBar:BarService){
        super(_extBar);
    }
}

我创建了一个自定义输入控件。我不想创建任何自定义验证。我想使用默认必需的minLength，maxLength等。我知道我可以这样做

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

但是我无法从父组件发送表单引用。我如何在文本框组件内使用setValidator。

// input-box.component.ts    
    import { Component, Input, forwardRef } from '@angular/core';
    import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';


    @Component({
      selector: 'app-input-box',
      template:`<label >{{inputdata.label}}</label><br>
      <input type="text" required #textBox [value]="textValue" (keyup)="onChange($event.target.value)" />`,
      styleUrls: ['./input-box.component.less'],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => InputBoxComponent),
          multi: true
        },
        /*{
          provide: NG_VALIDATORS,
          useExisting: forwardRef(() => InputBoxComponent),
          multi: true,
        }*/]
    })
    export class InputBoxComponent implements ControlValueAccessor {
      @Input() inputdata: any;
      private textValue: any = '';

      onChange(value) {
        this.textValue = value;
        this.propagrateChange(value);
      }

      private …

我试图写一条指令，限制用户只能在输入文本控件中输入数字字符。

@Directive({
  selector: '[numericControl]'
})
export class NumericControlDirective {

    contructor(
        private el: ElementRef,
    ) {}

    @HostListener('input', ['$event'])
    onInput(e: any) {
        if (e.which < 48 || e.which > 57) {
            e.preventDefault();
        }
    }

}

用法

<input type="text" placeholder="Volume" numericControl />

但这是行不通的，有人遇到过这个问题吗？

我的应用程序中有一些浏览器动画，它们运行正常，没有错误。ng test即使我BrowserAnimationsModule在app.module.ts文件中包含，我运行时也会遇到此错误。我正在使用动画HeaderComponent

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';

registerLocaleData(localeEs, 'es-us')

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

我已经尝试过此解决方案，但仍然遇到相同的问题。

我是Angular的新手,我刚刚建立了一个拦截器.根据多个教程,你必须包括HTTP_INTERCEPTORS在app.module像这样:

providers: [{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }]

我想知道该multi: true属性是什么意思/做什么以及它是否可以省略.

我已经阅读了有关此属性的angular.io指南.他们解释如下:

我不明白这一部分:

注意multi:true选项.这个必需的设置告诉Angular,HTTP_INTERCEPTORS是一个多提供者的标记,它注入一个值数组,而不是一个值.

这有点说明了这个概念,但是当拦截器注入多个值而不是它时,我还不太了解.例如,我自己的拦截器只是更改标题.这是否意味着它只注入一个值？

谢谢

编辑:

这是我的拦截器

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { LoginService } from '../Services/login.service';


@Injectable()
export class JwtInterceptor implements HttpInterceptor {

    constructor(private loginService:LoginService){}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        console.log("ik …

我正在使用routerLink返回我的页面.

目前的路线可以有3个级别:

myurl.com/parent
myurl.com/parent/child
myurl.com/parent/child/grandchild

另外,我有一些不同的组件,因此它不会总是父组件,它可以是parent1,也可以是parent2,也可以是子组件和孙子组件,例如:

myurl.com/parent2/child1/grandchild2

我想要的是总是去上一级,例如:

myurl.com/parent/child/grandchild -> myurl.com/parent/grandchild

我做的是:

<button [routerLink]="['../'']">
       back
</button>

但它总是导航到"myurl.com"

我怎么解决呢？

正如一些用户建议的那样,我正在分享我的路由配置:

在app.routing.ts中:

const APP_ROUTES: Routes = [
{
  path: '',
  canActivate: [LoggedInGuard],
  children: [
    {path: '', redirectTo: '/mainPage', pathMatch: 'full'},
    {path: 'parent', loadChildren: 'app/parent/parend.module#ParentModule'
]},
{path: '**', redirectTo: ''}
];

在parent.routing.ts中:

const PARENT_ROUTES: Routes = [
 {path: '', component: ParentComponent},
 {path: ':id', component: ChildComponent},
];

如果在浏览器中我写道:

myurl.com/parent -> it works

但单击后退按钮失败

我想知道你们的好建议，这是Angular 5中使用的最好的Ag-Grid与Extreme网格。

AG网格

Devextreme网格