标签: angular5

我试图在Angular 5项目中使用Bootswatch主题.我正在使用Bootswatch和Bootstrap版本4.0.0-beta-2.我已经通过npm安装了两个,并使用我的主要styles.scss中常用的angular-cli/webpack约定在styles.scss中导入_variables.scss和_bootswatch.scss.我还将相关主题bootstrap.min.css导入到此文件中,然后将其添加到angular.cli.json中的styles []数组中.

在构建期间,我得到:

@include box-shadow(none);
        ^
     No mixin named box-shadow

和破碎的构建.

当我试图运行此命令时:

ng generate component <component-name>

我收到了这个错误:

Error: Cannot read property 'dasherize' of undefined
Cannot read property 'dasherize' of undefined

我的角度配置:

Angular CLI: 1.7.1
Node: 7.5.0
OS: darwin x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.2.2
@angular/cli: 1.7.1
@angular/material: 5.2.2
@angular-devkit/build-optimizer: 0.4.2
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.34
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

我试图删除node_modules,npm cache clean,节点安装,但没有一个工作.

我尝试了许多角度adal库,但令牌的更新不是自动完成的.

这是我使用的配置.

在package.json中

"@types/adal": "^1.0.29",
"@types/adal-angular": "^1.0.0",
"adal-angular": "^1.0.17",

adal-angular带有两个脚本adal.js和adal-angular.js.我认为adal.angular.js仅适用于旧angularjs解决方案.所以我使用了adal.js和一个包装@ types/adal.

并包括adal.js在.angular-cli.json

  "scripts": [
    "../node_modules/adal-angular/lib/adal.js"
  ],

在我的angular 5应用程序中,我使用adal登录并向另一个URL上的网站发出请求api请求.

使用的配置

  JwtConfig: {
    tenant: "a1d50521-9687-4e4d-a76d-xxxxxxxxx",
    clientId: "8d708afe-2966-40b7-918c-xxxxxxxx",
    isAngular: true
  },

我的authService看起来像

  import { } from "adal";
  @Injectable()
  export class AuthService {
  private _config: adal.Config;
  private _context: adal.AuthenticationContext;
  constructor() {
    Logging = {
      level: 3,
      log: function (message) {
        console.log(message);
      }
    };
    this._config = environment.JwtConfig;
    this._context = new AuthenticationContext(this._config);
  }

不需要日志记录,但启用adal.js日志记录

很多示例在localstorage中存储令牌,但此令牌仅在1小时内有效.为了解决这个问题,我每次都调用acquireToken.如果它已过期,它将为我提供缓存的令牌或续订令牌. …

我有一个在组件A中编写的websocket逻辑,如下所示.

    this.socketService.connect('/socket_url');
    this.statusSubscription = this.socketService.messages
      .subscribe(result => {
        if (result !== 'pong') {
            // update Component B with the response obtained
        }
    });

我想知道每当我在旅途中收到websocket活动时如何更新组件B.

Angular 5应用程序工作正常但我在使用生产构建它时遇到以下错误.它也很好,ng build但不是ng build --prod.

"email"类型的参数不能分配给'string []'类型的参数.

行上的代码:

<mat-form-field>
  <input matInput placeholder="Email" formControlName="email" required>
  <mat-error *ngIf="form.hasError('email', 'email') && !form.hasError('required', 'email')">
    Please enter a valid email address
  </mat-error>
  <mat-error *ngIf="form.hasError('required', 'email')">
    Email is <strong>required</strong>
  </mat-error>
</mat-form-field>

形式:

private createForm() {
  this.form = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', Validators.required)
  });
}

我有一系列表单(每个表单由1个组件管理).

这些表单中有一种输入模式(例如,其中许多都需要允许输入地址),我必须重构为可重用的组件,因为它们以多种形式使用,我不想复制它们的逻辑也不是他们的模板

每个可重用的组件都必须这样做

1. 有它的逻辑
2. 它的模板包含输入标签而没有<form>标签
3. 有其客户端验证限制
4. 可能从其父级接收初始值
5. 能够将其字段的值作为对象返回到父对象(例如address: {street: "...", "city": "...", ...})
6. 如果不满足其验证约束,则使父表单无效
7. 一旦用户更改了其值,就使其"触摸"

从本教程为Angular2,我在了解如何实现目标1,2和4.

本教程中的解决方案还允许实现其他目标,但它通过从父级执行所有操作来实现(请参阅参考资料app.component.ts#initAddress).

我怎样才能实现3,5,6和7,而孩子中声明控件和它们的约束？

app.component.ts

import { Component,OnInit } from '@angular/core';
import { DataServiceService } from './data-service.service';
import {IModel} from './imodel';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  resultArray:IModel;
  constructor(private dataService:DataServiceService){}
  ngOnInit(){
    this.dataService.getDataFromURL().subscribe((resultData)=>{
      debugger
      this.resultArray=resultData;
    })
  }
}

dataservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataServiceService {

  apiURL='https://jsonplaceholder.typicode.com/posts';
  constructor(private http:HttpClient) { }

  getDataFromURL(){
    return this.http.get(this.apiURL)
  }


}

imodel.ts

export interface IModel {
       userId: number; …

我刚刚遇到这个代码:

<pagination (selectRowChange)="changeSelectRow($event)"
                        [total]=(total)
                        [(currentPage)]="currentPage"
                        [(pageSize)]="pageSize"
                        [pageSizes]="pageSizes"
                        [start]=(start)
                        [end]=(end)
                        [dataFiltered]=(dataFiltered)
                        [maxPage]=(maxPage)
                        (goToPage)="goToPage($event)"
                        (searchSubmit)="search($event)"
                        [filteredTotal]=(filteredTotal)
                        [status]="isDataAvailable">
            </pagination>

total和start输入采用括在括号中的值.我以前从未见过这个,我无法找到它的作用？

谢谢

在我的代码中,我按下按钮点击div.这是我的代码.

我的守则

如果用户滚动到div的末尾,我想禁用向下按钮,反之亦然.请帮忙.

When I checked the slide toggle it should work as expected. But when I try to uncheck it there is a confirmation window asking if you are sure. When I click cancel in that confirmation window, still the toggle changes to unchecked, which shouldn't happen. It should stay in the same state.

Here is my Html and TS Code

// html
<mat-slide-toggle 
   (change)="change($event)" [checked]="isChecked()" >
     To-pay
   </mat-slide-toggle>

TS code:

// ts
    change(e) {
       if(this.checked) {
           if(confirm("Are you sure")) {
              console.log("toggle") …