标签: angular5

你们知道如何使用@HostBinding装饰器在组件中批量注入样式声明吗？我在想的是:

@HostBinding('style')
get style(): CSSStyleDeclaration {
  return {
    background: 'red',
    color: 'lime'
  } as CSSStyleDeclaration;
}

在我的理解中,这应该为组件注入背景和颜色样式,但它不...

我可以像这样控制各个样式声明:

@HostBinding('style.background') private background = 'red';

但我想为所有人做这件事,请帮助:P

这是完整的代码:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello world!</h2>
    </div>
  `,
})
export class App {

  // This works
  @HostBinding('style.color') private color = 'lime';

  /* This does not work
  @HostBinding('style')
  get style(): CSSStyleDeclaration {
    return {
      background: 'red'
    } as CSSStyleDeclaration;
  }
  */

  constructor() {}
}

和一个工作的plunker:https://plnkr.co/edit/CVglAPAMIsdQjsqHU4Fb ？ p = preview

我正在尝试实现401响应的catch,并尝试在令牌刷新后基于Angular 4 Interceptor重试请求获取刷新令牌 .我试图实现同样的事情,但我从来没有能够重试该请求,我真的不确定这是否是应用刷新令牌策略的最佳方法.这是我的代码:

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {
 public authService;
 refreshTokenInProgress = false;
 tokenRefreshedSource = new Subject();
 tokenRefreshed$ = this.tokenRefreshedSource.asObservable();
 constructor(private router: Router, private injector: Injector) { }
 authenticateRequest(req: HttpRequest<any>) {
 const token = this.authService.getToken();
 if (token != null) {
 return req.clone({
 headers: req.headers.set('Authorization', `Bearer ${token.access_token}`)
 });
 }
 else {
 return null;
 }
 }
 refreshToken() {
 if (this.refreshTokenInProgress) {
 return new Observable(observer => {
 this.tokenRefreshed$.subscribe(() => {
 observer.next();
 observer.complete();
 });
 });
 } else …

我需要在我的Angular 5应用中包含webrtc-adapter。

我需要什么，除了做：npm install webrtc-adapter？

我是否需要进行其他进口？

我在角度组件中有一个侧导航栏,它在类似于此的点击上展开.用于创建导航栏的HTML代码段为:

HTML:

正如名称(openNav())所示,以下HTML代码将展开导航栏:

<div>
    <img (click)="openNav()" src="/imagepath" id="image">
</div>

以下HTML代码 将关闭导航栏:

<div id="mySidenav" class="sidenav">
    <ul class="navbar-nav mr-auto" id="sidenavContent">
        <li class="nav-item" id="close-btn">
            <img class="closebtn" (click)="closeNav()" id="white-cross" src="/assets/imagepath">
        </li>
        <li class="nav-item" id="close-btn">
           <p> Item 1 </p>
        </li>
        <li class="nav-item">
            <p> Item 2 </p>
        </li>

    </ul>
</div>

打字稿:

使用的打字稿是:

openNav() 
 {
     $("#mySidenav").css("width", "50%");   // Line A
 }

 closeNav() 
 {
    $("#mySidenav").css("width", "0%");   // Line B
 }

上述打字稿代码不包含在ngOnInit()函数中.

问题陈述 :

当我做ng serve我的命令提示符下,我收到以下错误:

错误TS2304:找不到名称'$'.

的 …

我正在使用Angular Material中的MatTable组件来创建动态数据表.

我需要得到一行的当前位置.我可以很容易地获得用户点击的行但我无法知道它在列表中的当前位置(这取决于排序/过滤/分页).

任何的想法？

我试图在拦截器中引发可观察到的错误，然后处理该错误。但是我不能。如果成功为假，我也可以收到成功的订阅。

我尝试在中再次返回一个值next.handle(restReq)。但是我失败了，没有订阅任何东西

restApi这样返回

{
  "success": false,
  "data": {
    "name": "Bad Request",
    "message": "123",
    "code": 0,
    "status": 400,
    "type": "yii\\web\\BadRequestHttpException"
  }
}

验证服务

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private sessionUrl = '/wechat/session';

  constructor(
    private http: HttpClient
  ) { }

  getSession(): Observable<any> {
    return this.http.post<any>(this.sessionUrl, {});
  }
}

auth.component.ts

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

试图实现Angular中的zoomooz插件功能。由于npm不支持zoomooz。是否可以具有相同的功能，例如单击动画放大。我正在将Angular 6与ng2图表一起使用，并希望在单击时放大div / canvas部分并恢复正常

在此处参考演示网址https://stackblitz.com/edit/ng2-chart-example

我有一个带有两个应用程序的Angular CLI项目。这两个应用程序是相同的，但是一个应用程序包含构建中的所有文件，另一个则需要排除模块。

Angular CLI版本：1.7.4 Angular版本：5.2.10

我将两个应用程序添加到angular-cli.json文件中，每个应用程序都有一个单独的ts-config文件。

  "apps": [
    {
      "name": "app",   <---- first app
      "root": "src",
      "outDir": "/wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",       <----first TS config
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "admin",   <---- second app
      "root": "src",
      "outDir": "/wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": …

在Angular 5中，我注意到ng serveVisual Studio Code中的命令具有以下奇怪行为，导致第一次编译与后续编译的结果不同。

• 假设我们有一个简单的TypeScript错误，例如 [ts] Property 'x' does not exist on type 'y'.
• 当我键入ng serve并按Enter键时，控制台将显示TypeScript错误，然后显示消息webpack: Failed to compile。
• 但是，如果忽略此错误，请打开另一个文件，然后直接单击CTRL + S，则会忽略TypeScript错误，并显示以下消息：webpack: Compiled successfully。

这是我一段时间以来注意到的。第一次编译应用程序时，如果出现TypeScript错误，它将失败。但是，在由后续保存触发的编译中，尽管存在这些错误，该应用程序仍可以成功编译。

为什么会这样？有没有解决的办法，或者这是预期的行为？

我试图过滤具有以下结构的许多对象的列表：

{  
"element1":{  
  "code":"12345",
  "location":"Location"
},
"users":[  
  {  
     "id":1,
     "name":"Name 1",
     "surname":"Surname 1",
  },
  {  
     "id":2,
     "name":"Name 2",
     "surname":"Surname 2",
  }
 ]
}

现在，我正在按第一个元素进行过滤，如下所示：

filterList(value) {

    if (value&& value.trim() != '') {
        myList = myList .filter((item) => {
            return (item.element1.location.toLowerCase().indexOf(value.toLowerCase()) > -1);
        })
    }
}

我一直试图通过用户属性（这是对象列表）对其进行过滤，以对其进行过滤，而在姓氏中，我必须更改什么？