标签: angular-components

第一个组件.ts

onRecievingResults(value){
    console.log(value);
    this.faqService.saveData(value);
    console.log(value);
    this.router.navigate(['results'], {relativeTo: this.route});}
}

在此onRecievingResults()函数中，单击按钮后，我将输入文本保存到saveData()名为 的服务中的方法faqService。

服务.ts

saveData(value){
    console.log("save data function called " + value + this.sharingData.name);
    this.sharingData.name;
}
getData()
{
    console.log('get Data function called ');
    return this.sharingData.name;
}
getServers(name){
    return this.http.get(Staticdata.apiBaseUrl + "/2.2/search/advanced?key="+ Staticdata.key +"&access_token="+ Staticdata.access_token +"&/2.2/search/advanced?order=desc&sort=activity&accepted=True&closed=True&title=" + name + Staticdata.redirectUrl + "&filter="+ Staticdata.filters)
        .map(
        (response: Response) => {
            const items = response.json();
            return items;
        },
    )
    .catch(
        (error: Response) => {
            return Observable.throw(error);
        }
    );  
  }
} …

我正在使用 Angular-Tree-Component 生成带有复选框选项的树。超文本标记语言

<tree-root [nodes]="nodes" [options]="options">
      </tree-root>

打字稿：

import { ITreeOptions } from 'angular-tree-component';
import { Component } from '@angular/core';

export class myComponent {
nodes = [
    {
      name: 'root1',
      children: [
        { name: 'root1_child1' },
        {
          name: 'root1_child2', children: [
            { name: 'grand_child1' },
            { name: 'grand_child2' }
          ]
        }
      ]
    },
    {
      name: 'root2',
      children: [
        { name: 'root2_child1' },
        {
          name: 'root2_child2', children: [
            { name: 'grand_child1' },
            { name: 'grand_child2' }
          ]
        }
      ]
    }
  ]; …

我需要在 Angular 中测试一个组件，它只有一种方法和某些 @Input 和 @Output 属性-

  updateColumns(eventValue: ManagedColumns) {
    this.applyColumnChanges.emit(eventValue);
  }

还有另一个组件具有应该调用上述方法的方法。调用因为它正在发出一个事件，我相信该事件将被另一个事件消耗，而后者又会发出另一个事件，该事件被另一个组件中的第三个消耗 -

applyChanges() {
        this.apply.emit(<ManagedColumns>{
            selectedColumns: this.selectedItems.slice(),
            availableColumns: this.availableItems.slice()
        });
        this.closeDialog();
    }

我正在尝试测试 updateColumns 但不知道该怎么做？是否可以模拟 applyChanges 依次发送到 updateColumns 并且我们可以检查相同的值？

如果我试过——

manageColumnsComponent = TestBed.createComponent(ManageColumnsComponent).componentInstance;
    spyOn(manageColumnsComponent.applyChanges, 'emit');

得到错误 -

[ts] Argument of type '"emit"' is not assignable to parameter of type 'never'.

在 Angular 5 应用程序中，当子组件位于下面的不同父组件列表中时，我希望它的样式略有不同。

例如列表组件下卡片的红色背景
列表详细信息组件下卡片的绿色背景

我想知道是否可以通过子组件中的scss来完成？因为我认为在子组件本身内部执行它会更容易跟踪。

<listing>
  <card />
<listing/>
<listingDetail>
  <card />
</listingDetail>

谢谢。

如果我有一个自定义指令ParentDirective和自定义组件，ChildComponent如下所示：

<div appParent>
  <app-child></app-child>
</div>

...然后我可以@ContentChild在指令中使用来引用组件：

@ContentChild(ChildComponent) child: ChildComponent;

请参阅此 StackBlitz 的工作原理。（它登录到控制台以显示该child成员已设置）。

但是，如果我将 appParent 更改为结构指令，则child永远不会设置该成员。

<div *appParent>
  <app-child></app-child>
</div>

请参阅此 StackBlitz。

不能@ContentChild与结构指令一起使用吗？

是的，所以我正在迭代一系列信息，并且这些信息按照我想要的方式显示，但是，我在控制台中收到了一些令人惊讶的错误：ERROR TypeError: "_v.context.$implicit is undefined"

API服务：

private extractData(res: Response) {
    let body = res;
    return body || {};
  }

  getWeather(city: string, isoCode: string): Observable<any> {
    return this.http.get(`${this.endPoint}${city},${isoCode}${this.constants.apiKey}`)
    .pipe(map(this.extractData));
  }

使用api服务的组件：

  theWeather:any = [];
  countryList = COUNTRIES;
  isLoading: boolean = true;
  showWeather: boolean = false;

  constructor(private apiCall:ApiService) { }


  ngOnInit() {
    this.retrieveWeather()
  };

  retrieveWeather() {
    console.log('COUNTRY LIST', this.countryList);

    this.theWeather = [];
    this.countryList.map((element, i) => {
      this.apiCall.getWeather(element.city, element.countryIso)
        .subscribe((data: {}) => {
          element.weatherInfo = data;
        });
        this.isLoading = false;
      });
      this.showWeather …

我有一个 Angular 7 组件库，我正在尝试为按钮等添加一些图像。

我的项目结构是这样的

projects
 components
   src
     lib
       myComponent
         assets
            images
               image.png 

我试图在其中使用图像的组件与“assests”文件夹处于同一级别。

例如我添加了这个按钮

<p>
<button (click)="activateSelect()"><i 
src="../../assets/images/tempImage.png"></i></button>  
</p>

...但是当我在 Chrome 中构建和使用开发工具来查看按钮时，图像的路径是 http://localhost/assets/images/tempImage.png

似乎路由不能正常工作？

我试过相对路径，“./”，只是把路径放进去，没有任何作用。这似乎比它应该的更难，所以我确定我不了解它是如何工作的。

任何帮助是极大的赞赏。

更新 我从来没有让图像在按钮上工作，但我用“img”标签替换了“button”标签并让它像这样工作......

<img style="background-color: aliceblue;width:35px;height:35px" 
(click)="activateSelect()" src="assets/tempSelect.png">

更新 2 如果您想要应用程序的“assets”文件夹中的图像，则上述方法有效。我正在构建一个组件库，我需要我的资产随身携带……有没有办法在组件库中创建一个包含资产的文件夹，您可以使用组件库构建和公开？

更新 3 为了让您的图像进入您的组件库，以便所有内容都是自包含的，您需要使用一个工具来对图像进行 base 64 编码。我使用了https://base64.guru/converter/encode/image 一旦在工具中选择您的图像，然后选择“输出格式”我使用“数据 URI -- data:content/type;base64”然后单击“编码image to base 64" button 这将输出一个这样的字符串

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsSAAALEgHS3X78AAABTElEQVRIie2WwY2DMBBFX1YpICVQQkpwCSmBk + dKCSmB69wogRIowSW4BDpgDx4kFIEwISG7Ur7kAxqL5 + / 5BP + GYeAT + vkI9Qv + s2ARqQ8Hi4gDylfBtzgugBpwIlIeDQ6AA + 4icj0K7ICgqj1QAo2IXI4AF6oaAVS1AxobbwfH6YOq1kAvIve3gS3RcaZUATervx4MXOfAD / 0u3gEugG6uoKqB5LzdErZdjifwFmhJ5zxPwzCsDu99zJzXee / LnLnntYXZ9i26FZHG6sEc1yISrAWLWgWTtjlMFlEDlQUL0oelsnmFLaIihW43ONqRaYDeYK3VO6BX1XvGuzaDLyQHN5KrR7BjIfVLykl1gbm0vo2gUY / PecpJ4Ex6g / F + sjX103F65nprl4FIaoGzXXHjTyRHOT2eU0NKbgeUW4CjnnL8Cv2PW + …

我是 Angular 的新手，对ng-Bootstrap 的Modals有一些疑问。我已经能够打开同一组件中的模态框，并且它们工作正常，一个例子是：

<a (click)="openAbout(contentAbout)" class="nav-link">About</a>

  openAbout(contentAbout) {
    this.modalService.open(contentAbout, { centered: true, scrollable: true });
  }

<ng-template #contentAbout let-c="close" let-d="dismiss">
  <div class="modal-header">
      <h4 class="modal-title" id="modal-primary-title">About us</h4>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
  </div>
  <div class="modal-body centered">
    <h2>Gravity Now!</h2>
    <p>It is a platform designed for Space Apps Challenge and the Challenge Gravity Map, Earth Watch category and was chosen in the Top 5 of The Most Inspiring Projects of 2014.</p>
    <a …