小编Sha*_*vek的帖子

我正在尝试为 Angular 组件编写单元测试，它可以隐藏/显示作为输入传递给组件本身的一些内容。预期的输入定义为 TemplateRef。

我的component.component.ts

@Component({
    selector: "my-component",
    templateUrl: "./my-component.component.html",
    styleUrls: ["./my-component.component.scss"],
    exportAs: "mycomponent"
})
export class MyComponent {
    private _expanded = false;

    @Input()
    set expanded(value: boolean) {
        this._expanded = value;
    }

    @Input()
    body: TemplateRef<any>;
    @Input()
    handler: TemplateRef<any>;

    constructor() {}

    toggleView() {
        this.expanded = !this._expanded;
    }
}

我的component.component.html

<div class="wrap">
    <!-- Header -->
    <main #header>
        <header (click)="toggleAccordion()">
            <div class="handler">
                <ng-container [ngTemplateOutlet]="handler">
                </ng-container>
            </div>
            <i class="icon icon-expand" [ngClass]="{ 'icon-expand': _expanded, 'icon-collapse': !_expanded }"></i>
        </header>
    </main>
    <!-- Body -->
    <div class="body" *ngIf="_expanded"> …

我创建了一个拦截器，该拦截器将令牌附加到仅在功能延迟加载的模块中进行api调用所需的授权标头中。

但是，我不认为拦截器被称为是因为在reports模块中没有显示console.logs。

我读过其他问题，认为这可能与HTTPClientModule有关。此HttpClientModule仅在我的主app.module中进行过一次初始化。

我如何使拦截器仅适用于延迟加载的功能模块。

验证拦截器

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/do';

import { AuthService } from './../services/auth/auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private auth: AuthService) {
        console.log('start interceptor');
     }

    intercept(req: HttpRequest<any>, next: HttpHandler) {

        console.log('intercepting');

        const authToken = this.auth.getProfileToken();

        console.log(authToken);

        const authReq = req.clone({
            headers: req.headers.set('Authorization', authToken)
        });

        return next.handle(authReq);

    }

}

report.module.ts

import { NgModule } from '@angular/core';
import …

我想将一个单一的madule从项目复制到另一个没有硬拷贝.并需要像npm这样的依赖管理器来处理这个问题.我的两个项目在一家公司开发,我可以在PC上克隆两个项目.

我想从一个项目导出一个模块,并将该模块导入另一个带有typescript导出和导入的项目.

请帮我解决这个问题.

我正在通过该createComponent方法创建一个动态组件，并且无法让我的child组件更新从via方法input传递到其中的值，但是当我更新子组件中的值时，它并没有更新它的引用。parentcomponent.instance.prop = somevalueparent

父组件：

import {
  Component,
  ViewChild,
  ViewContainerRef,
  ComponentFactoryResolver,
  AfterContentInit
} from '@angular/core';

import { ChildComponent } from '../child/child.component';

@Component({
  selector: 'parent-component',
  template: `
    <div>
      <input type="text" (keyup)="name = $event.target.value">
      <span>{{ name }}</span>
    </div>
    <ng-container #container></ng-container>
  `,
  styles: []
})
export class ParentComponent implements AfterContentInit {
  @ViewChild('container', { read: ViewContainerRef}) container: ViewContainerRef;
  private _name = 'John Doe';
  get name() {
    return this._name;
  }
  set name(name: string) {
    this._name = name; …

我正在学习Java-8 Lambda,我试图理解java.util.function.Function接口中的addThen默认方法.根据我的理解,addthen将首先执行First函数,然后它将执行第二个方法.所以我创建了一个如下程序:

//Pojo class 
  class Bike {

    public Bike(String bikeName, int price, String bikeType) {
        this.bikeName = bikeName;
        this.price = price;
        this.bikeType = bikeType;
    }

    private String bikeType;
    private String bikeName;
    private int price;

    public String getBikeType() {
        return bikeType;
    }

    @Override
    public String toString() {
        return "Bike [bikeType=" + bikeType + ", bikeName=" + bikeName + ", price=" + price + "]";
    }

    public void setBikeType(String bikeType) {
        this.bikeType = bikeType;
    }

    public String getBikeName() {
        return bikeName;
    } …

我正在研究一个 Angular 6 项目。当我运行命令时，我的代码工作正常

ng --serve

以及当我使用它构建它时

构建

并将其部署在我的本地 Tomcat 服务器上。我没有遇到任何错误，工作得很好。

但是当我在我的 Ubuntu 机器上部署相同的 Apache HTTPD 服务器时，我分别在 Firefox 和 Chrome 上遇到以下错误

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: onfocusin attribute on DIV element.

Error: call to Function() blocked by CSP
compiler.js:22402

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: call to eval() or related function blocked by CSP.

我参考了许多链接并尝试了多种选择，但仍未成功解决。任何帮助将不胜感激。

提前致谢。

我阅读了Angular 测试，但不确定是否有任何关于在模态中测试元素以及如何检查自定义操作的参考。我的目的是编写必要的测试表明我将确保我的函数和模态按预期工作。

由于模态被隐藏，检查模态元素是否出现的测试失败。所以我想这里缺少一些东西。

这是我的photos.components.ts文件：

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-photos',
  templateUrl: './photos.component.html',
  styleUrls: ['./photos.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class PhotosComponent implements OnInit {

  constructor(private modalService: NgbModal) { }

  openDarkModal(content) {
    this.modalService.open(content, { windowClass: 'dark-modal', size: 'lg', centered: true });
  }

  ngOnInit() {
  }

}

这是我的photos.component.html文件：

<div>
  <div class="col-lg-4 col-sm-6 mb-3">
    <a><img (click)="openDarkModal(content)" id="photo-one" class="img-fluid z-depth-4 relative waves-light" src="#" alt="Image" data-toggle="content" data-target="#content"></a>
  </div>
</div>

<!-- Dark …

我正在使用 bootstrap4 navs 和一个表单，我试图将 css 类更改为显示：none; 对于每个未选择的选项卡，我尝试使用 ngClass 来实现此目的，但没有起作用 stackblitz demo

  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="itemSummary-tab" data-toggle="tab" href="#itemSummary" role="tab" aria-controls="itemSummary" aria-selected="true">Item Summary</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="details-tab" data-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="false">Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="measurement-tab" data-toggle="tab" href="#measurement" role="tab" aria-controls="measurement" aria-selected="false">Measurement</a>
    </li>
  </ul>

     <div class="tab-pane fade show active" ngClass="!active? display:none" id="itemSummary" role="tabpanel" aria-labelledby="itemSummary-tab"> 
    ....
    </div>
  <div class="tab-pane fade" id="measurement" ngClass="!active? display:none" role="tabpanel" aria-labelledby="measurement-tab">
...
</div>
  <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab"> …

我有一项使用httpClient我想测试的服务：

@Injectable({
    providedIn: 'root'
})
export class TodolistService {

  constructor(private http: HttpClient) { }

  getTodoLists(): Observable<HttpResponse<TodoList[]>> {
    return this.http.get<TodoList[]>("https://localhost:44305/todolist", { observe: 'response' });
  }
}

我的单元测试设置如下所示：

import { TestBed, getTestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { TodolistService } from './todolist.service';

describe('TodolistService', () => {
  let injector: TestBed;
  let service: TodolistService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ],
      providers: [ TodolistService ]
    });

    injector = getTestBed();
    service = injector.get(TodolistService); …

我尝试使用在Angular CDK: How to set Inputs in a ComponentPortal 中找到的方法 ，但PortalInjector似乎已被弃用，并且没有关于在其位置做什么的实际说明。弃用警告指出“Injector.create改为使用”。但不知道如何使用它、在哪里使用它或者它实际上取代了什么。

我也尝试过研究Material 自己的 Dialog 组件，看看我是否能弄清楚他们是如何做到的，但一无所获。

所以我再次对 Angular 13 提出问题：

How can I pass data into and out of a component that was created using a ComponentPortal()? If the answer is something generic such as using an Injector, can you please point me to an example or documentation on how to do so? A 'hello world' of passing Injectors?