标签: angular5

我正在Angular 5中开展PDF Viewer开发.我已经完成了为UI部分编写HTML代码.现在我有了为UI元素提供功能的JavaScript文件.由于Angular 5支持用于实现UI组件功能的typescript,我想在Angular Project中包含JavaScript文件,并从我的Typescript代码中调用它们.

问题:

1. 如何在Angular项目中包含JavaScript文件？
2. 如何从Typescript类调用JavaScript函数？

如果有人给我一个例子,那将是很棒的!

提前致谢!!

我们刚刚将其中一个应用程序升级到Angular 5,并开始转换为rxjs v5.5中引入的lettable 运算符.

因此,我们使用.pipe()运算符将可观察的管道重写为新语法.

我们之前的代码看起来像这样,如果抛出错误,则.catch()内部.switchMap()不会中断效果的运行.

@Effect()
loadData$ = this.actions$
.ofType(LOAD_DATA)
.map((action: LoadData) => action.payload)
.withLatestFrom(this.store.select(getCultureCode))
.switchMap(([payload, cultureCode]) => this.dataService.loadData(payload, cultureCode)
  .map(result => {
    if (!result) {
      return new LoadDataFailed('Could not fetch data!');
    } else {
      return new LoadDataSuccessful(result);
    }
  })
  .catch((err, caught) => {
    return Observable.empty();
  });
  );

如果在调用中抛出错误dataService,它将被捕获并处理(简化了错误处理).

有了新的语法和用法.pipe(),我们现在有了这个

@Effect()
loadData$ = this.actions$
.ofType(LOAD_DATA)
.pipe(
  map((action: LoadData) => action.payload),
  withLatestFrom(this.store.select(getCultureCode)),
  switchMap(([payload, cultureCode]) => this.dataService.loadData(payload, cultureCode)),
  map(result => …

我不能像文档中描述的那样注入MatDialogRef:https://material.angular.io/components/dialog/overview

当我试图这样做时,我有错误:

错误错误:StaticInjectorError [MatDialogRef]:StaticInjectorError [MatDialogRef]:NullInjectorError:没有MatDialogRef的提供程序!

app.module.ts

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

import {
	MatInputModule,
	MatDialogModule,
	MatProgressSpinnerModule,
	MatButtonModule,
	MatDialog,
	MatDialogRef
} from '@angular/material';

import { ApiModule } from '../api/api.module';
import { RoutingModule } from '../routing/routing.module';

import { RegistrationComponent } from './components/registration.component';
import { LoginComponent } from './components/login.component';

import { AccountService } from './services/account.service';

@NgModule({
	imports: [
		BrowserModule,
		MatInputModule,
		MatDialogModule,
		MatProgressSpinnerModule,
		MatButtonModule,
		FormsModule,
		RoutingModule,
		ApiModule
	],
	declarations: …

如何在切换组中设置默认选择的最后一个按钮.
这是我的代码.

<mat-button-toggle-group #group="matButtonToggleGroup">
    <mat-button-toggle value="Heritage">
        <span>Heritage</span>
    </mat-button-toggle>
    <mat-button-toggle value="Nature">
        <span>Nature</span>
    </mat-button-toggle>
    <mat-button-toggle value="People">
        <span>People</span>
    </mat-button-toggle>
    <mat-button-toggle value="All">
        <span>All</span>
    </mat-button-toggle>
</mat-button-toggle-group>

我目前正在处理几个字段(超过10个字段)的Angular/Typescript中的表单,我想更正确地管理错误而不重复我的html页面中的代码.

以下是表单的示例:

<form [formGroup]="myForm">
     <label>Name</label>
     <input type="text" formControlName="name">
     <p class="error_message" *ngIf="myForm.get('name').invalid && (myForm.submitted || myForm.get('name').dirty)">Please provide name</p>
     <label>Lastname</label>
     <input type="text" formControlName="lastname">
     <p class="error_message" *ngIf="myForm.get('lastname').invalid && (myForm.submitted || myForm.get('lastname').dirty)">Please provide email</p>
     <label>Email</label>
     <input type="text" formControlName="email">
     <p class="error_message" *ngIf="myForm.get('email').hasError('required') && (myForm.submitted || myForm.get('email').dirty)">Please provide email</p>
     <p class="error_message" *ngIf="myForm.get('email').hasError('email') && (myForm.submitted || myForm.get('email').dirty)">Please provide valid email</p>
</form>

就我而言,我的表单有两种类型的验证:

• Html验证:必需,maxSize,......等
• 返回验证:例如,帐户无效,已加载文件的大小,...等.

我尝试使用这里提到的指令

<form [formGroup]="myForm">
     <label>Name</label>
     <input type="text" formControlName="name">
     <div invalidmessage="name">
        <p *invalidType="'required'">Please provide name</p>
     </div>
     <label>Lastname</label>
     <input type="text" …

我有一个奇怪的错误.通常(我做谷歌搜索),在这种情况下,Angular在方括号中指定哪个模块/服务/提供者/等等引起了问题.但是在这里,它只说options.

我尝试添加HttpClientModule, HttpModule, Options到提供者/导入 - 没有成功.

试图按照这个调试指南调试未知的提供程序在minified angular javascript中,但它也没有带来任何东西(没有invoke调用堆栈,只是调用相关联Zone)

我app.components.ts看起来像这样:

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

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
})
export class AppComponent {
  constructor() {}
}

Mozilla控制台追溯:

Error: [object Object]
Stack trace:
resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:783:31
resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:754:17
scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:831:17
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4952:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:423:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:191:28
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:595:25
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:502:21
invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1370:9
globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1388:17

Mozilla控制台详细回溯(当我点击下拉按钮时):

Error
?
columnNumber: 31
?
fileName: "http://localhost:4100/polyfills.bundle.js line 733 > eval"
?
lineNumber: 783
?
message: "Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]: …

我有以下目录结构

我想创建一个新页面,比方说,一个关于页面.我想把它放在src/app/page/about/*

所以我尝试:

ng generate component pages/about

但我得到这个错误:

Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.
More than one module matches. Use skip-import option to skip importing the component into the closest module.

使用页面存储我的单独页面是一个好主意吗？如何使用angular-cli在子目录中生成组件？

将应用程序从5号角迁移到6号角后，运行ng时会弹出以下错误。

模式验证失败，并出现以下错误：数据路径“”不应具有其他属性（项目）。错误：模式验证失败，并出现以下错误：数据路径“”不应具有其他属性（项目）。在MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [作为项目]（... / TemplateApp / me-cmf-web-template-angular / node_modules / @ angular-devkit / core / src / workspace / workspace中。 js：210：42）在MergeMapSubscriber._tryNext（/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:65:27 ）（位于MergeMapSubscriber.Subscriber._next（... / me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js：55：18）中。

我假设错误与.angular.json文件有关，该文件是从.angular-cli.json重命名的。

我的.angular.json文件如下：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "mediaweb"
    },
    "apps": [{
            "root": "src",
            "outDir": "dist/browser",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "styles.scss",
                "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
                "../node_modules/owl.carousel/dist/assets/owl.theme.default.css",
                "../node_modules/video.js/dist/video-js.css"
            ],
            "scripts": [
                "../node_modules/jquery/dist/jquery.js",
                "../node_modules/owl.carousel/dist/owl.carousel.js",
                "../node_modules/video.js/dist/ie8/videojs-ie8.js",
                "../node_modules/video.js/dist/video.js"
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.dev.ts",
                "prod": …

是活性形式,以去具有可以聆听到它包含并执行一些成分,它的方法形式的有效性状态变化的组件的方式吗？

使用templateRef就可以很容易地禁用模板中的提交按钮[disabled]="#myForm.invalid",但这不涉及组件的逻辑.

看模板表单'doc我没找到方法

我正在从教程(https://angular.io/tutorial/toh-pt4#inject-message-service)学习新的角度.在添加服务后运行应用程序时我陷入了困境

../node_modules/rxjs/Rx"'没有''的导出成员'.

    hero.service.ts
---------------------


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

// import { Observable, of } from 'rxjs';
import { Observable, of } from 'rxjs/Observable';

import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { MessageService } from './message.service';

@Injectable()

export class HeroService {

  constructor(private messageService: MessageService) { }

  getHeroes(): Observable<Hero[]> {
    // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return of(HEROES);
  }
}

我的Angular版本和相关信息是

Angular CLI: 1.7.4
Node: 6.14.1 …