标签: angular5

我正在尝试通过实现 MatFormFieldControl、ControlValueAccessor 和 Validator 接口来创建自定义表单控件。

但是，当我提供NG_VALUE_ACCESSOR或NG_VALIDATORS...

@Component({
  selector: 'fe-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.scss'],
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => PhoneNumberInputComponent)
    },
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PhoneNumberInputComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => PhoneNumberInputComponent),
      multi: true
    }
  ]
})
export class PhoneNumberInputComponent implements MatFormFieldControl<string>,
  ControlValueAccessor, Validator, OnDestroy {
  ...
}

创建循环依赖：

未捕获的错误：模板解析错误：无法实例化循环依赖！控件

这有效：

@Component({
  selector: 'fe-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.scss'],
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => PhoneNumberInputComponent)
    } …

我可以在使用sw预缓存来生成服务工作者时排除一些网址.我是swprecache.config.json

module.exports = {
navigateFallback: '/index.html',
stripPrefix: 'dist',
root: 'dist/',
staticFileGlobs: [
  'dist/index.html',
  'dist/**.js',
  'dist/**.css',
  'dist/**.ico',
  'dist/assets/images/**.jpg',
  'dist/assets/images/**.png',
  'dist/assets/images/**.gif',
  'dist/assets/js/**/**.js',
  'dist/assets/js/**.js',
  'dist/assets/css/**.css',
  'dist/assets/fonts/**.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}',
  'dist/**.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}',
   '!dist/Subscription/**.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'
],

runtimeCaching: [{
  urlPattern: /^https:\/\/netdna\.bootstrapcdn\.com\//,
  handler: 'networkFirst'
}]

};

我尝试使用不像'!dist/Subscription/**.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'这样的运算符.但它不起作用.所以我是导航到子网站时获取无法匹配任何路由错误.仅清除浏览器数据后,我可以导航到子网站.任何人都可以帮我解决它,请找我的错误

谢谢

在angular5上,我尝试对我的大多数模块/组件进行相同的项目AOT编译......但我有一部分需要进行JIT编译.

对于第二部分,HTML来自Ajax请求并包含一些必须由angular编译的组件标记.要管理这部分,我使用看起来像这样的指令:

export class ArticleLiveDirective implements OnInit, OnChanges, OnDestroy {

    // [...]    

    constructor(
        private container: ViewContainerRef,
        private compiler: Compiler
    ) { }

    // [...]

    private addHtmlComponent(template: string, properties: any = {}) {
        this.container.clear();
        //Force always rootDomElement.
        const divTag = document.createElement('div');
        divTag.setAttribute('id',this.currentId);
        divTag.innerHTML = template;
        template = divTag.outerHTML;

        // We create dynamic component with injected template
        @Component({ template })
        class ArticleLIveComponent implements OnInit, OnChanges, OnDestroy {
            constructor(
                private articleService: ArticleService
            ) {}
            ngOnInit() {}
            ngOnChanges(changes: SimpleChanges) {}
            ngOnDestroy() {}
            goToPage($event: Event, …

我非常了解 Angular 的更改检测是如何工作的，以及我们如何使用 OnChanges 钩子来检测@Input属性更改，以及订阅 ngModel valueChanges 例如指令或组件等。

任何人都可以解释这里发生了什么：

# 自定义指令：

假设我们有一个自定义指令 myNumber，它有一个 @Input() 属性 ngModel：

@Directive({
  selector: "[myNumber]"
})
class MyNumberDirective implements OnChanges {

  @Input() ngModel: any;

  constructor(private model: NgModel) {
    this.model.control.valueChanges.subscribe(data => {
      console.log('directive model changes detected by model control value change subscription');
    });
  }

  ngOnChanges(changes: SimpleChanges){
    if(changes.ngModel){
      console.log('directive input ngModel changes detected by OnChanges hook');
    }
  }
}

• 在上面的示例中，我将订阅设置为@Input属性 ngModel 和指令的模型对象更改。当模型值更改时，应将更改记录在控制台中。

# 组件模板：

<input type="number" myNumber [(ngModel)]="number1" />
<input type="number" myNumber [(ngModel)]="number2" /> …

我有以下路线路径：

{
    path: 'teacher',
    component: DashboardTeacher, canActivate: [AccessGuardTeacher('Teacher')]
}

如您所见，我尝试在课堂上传递参数“Teacher” AccessGuardTeacher：

export class AccessGuardTeacher implements CanActivate {

  constructor(private role: string) {
  }
}

怎么做才对？

我正在尝试在我的 angular 应用程序中实现一个 Material 表。分页和过滤器工作正常，但我无法对我的表格进行排序。我对 MatSort 的引用未定义。

我确实在 AppModule 中导入了它：

import {MatTableModule} from '@angular/material/table';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatButtonModule, MatCheckboxModule,MatPaginatorModule,MatInputModule} from '@angular/material';
import {MatSortModule} from '@angular/material/sort';

...
@NgModule({
  declarations: [...],
  imports: [   
     MatSortModule,
     MatTableModule,
     MatPaginatorModule,
     MatInputModule,
     ...
   ]
  })

这是我的 component.ts：

import { Component, OnInit , ViewChild, AfterViewInit} from '@angular/core';
...
import {MatTableDataSource,MatSort,MatPaginator} from '@angular/material';
...
export class MyClass inplements OnInit, AfterViewInit{
  @ViewChild(MatSort) sort:MatSort;
  @ViewChild(MatPaginator) paginator:MatPaginator;
  ...
  ngAfterViewInit(){
     this.dataSource = new MatTableDataSource(this.fake_data);
     this.dataSource.paginator = this.paginator
     this.dataSource.sort = this.sort
  } …

我在使用angular 5中的注入服务时遇到了问题,如教程中所示.

我有一个简单的服务

@Injectable()
export class SimpleService {
    ...
}

还有一个简单的组件:

@Component({...})
export class SimpleComponent {
    constructor(private simpleService SimpleService) {}
}

服务设置为providers模块:

@NgModule({
    ...
    providers: [SimpleService]
    ...
})
export class SimpleModule {}

我在控制台中看到以下错误:

Error: Can't resolve all parameters for SimpleComponent

但是,如果我注入SimpleService与@Inject像

@Inject(SimpleService) private simpleService: SimpleService

错误消失了.

我究竟做错了什么？

更新:我看到几个答案,人们建议添加emitDecoratorMetadata: true到tsconfig文件.但这条线已经存在

我正在为我的 angular 项目中的一个问题寻找解决方案，ng serve --watch但未检测到某些文件中的更改。

我得到了一个解决方案，上面写着使用 --poll=2000

它真的奏效了。

但是没有关于 flag poll功能的明确信息。

嗨，我正在使用 angular 5，我正在为它编写一个全局处理程序，如下所示。

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  constructor(
    private injector: Injector,
  ) { }


  handleError(error: Error | HttpErrorResponse) {
    const router = this.injector.get(Router);
    const zone = this.injector.get(NgZone);
    console.log('Here')
    console.log(error)

    if (error instanceof HttpErrorResponse) {

      // Client Error Happend
      zone.run(() => router.navigate(['/error'], { queryParams: { error: JSON.stringify(error) } }))

    } else {
      // Log the error anyway
      router.navigate(['/error'], { queryParams: { error: JSON.stringify({ message: 'Failed' }) } });
    }
  }
}

在 Observable 世界中一切正常，即如果我执行失败的 http 调用，如下所示

fireServerError() { …

Angular5：需要构建一个应用程序，其中必须在文本区域内显示 TextArea 字符数，而不是外部。

找到多种显示字符数的方法，我能够做到这一点，但是是否有可能如何在TextArea 内显示该字符数？

代码：HTML 文件

<td>
<textarea pInputTextArea [(ngModel)]="value" (ngModelChange)="valueChange(value)" maxlength="1000"></textarea>
<span>{{remainingText}}</span>
 </td>

.ts 文件

 valueChange(value) {
  this.remainingText = 1000 - value;
 }