标签: angular-components

我写了一个动态表单,其中有一个主要部分和子部分基于在主要部分(widget.type)中选择的类型.使用ngSwitch显示和隐藏子部件.

表单的HTML如下所示:

<form class="widget-form cc-form" (ngSubmit)="saveChanges()" novalidate>
  <div class="forms-group">
    <label for="title" i18n="@@title">Titel</label>
    <input class="form-control" id="title" name="title" type="text" [(ngModel)]="widget.title" required />
  </div>

  <div class="forms-group">
    <label class="checkbox-label" for="show" i18n>
      <input id="show" name="show" type="checkbox" [(ngModel)]="widget.show" /> <span>Titel tonen in app</span>
    </label>
  </div>

  <div class="forms-group">
    <label for="type" i18n="@@type">Type</label>
    <select class="form-control" id="type" name="type" [(ngModel)]="widget.type" required>
      <option value="text-widget" i18n="@@Text">Tekst</option>
      <option value="tasklist-widget" i18n="@@Tasklists">Takenlijst</option>      
      <option value="image-widget" i18n="@@Text">Afbeelding(en)</option>
      <option value="video-widget" i18n="@@Video">Youtube</option>
      <option value="link-widget" i18n="@@Link">Link</option>
      <option value="contacts-widget" i18n="@@Contacts">Contactpersonen</option>
      <option value="attachment-widget" i18n="@@Attachments">Bijlage(n)</option>
    </select>
  </div>

  <ng-container [ngSwitch]="widget.type">

    <text-widget *ngSwitchCase="'text-widget'" [data]="widget"></text-widget>

    <tasklist-widget *ngSwitchCase="'tasklist-widget'" …

我是角度4的新手.

我对角度4嵌入式组件有疑问.

例:

<hero-list>
    <hero></hero>
    <hero></hero>
</hero-list>

我想知道如何基于这个将组件嵌入到另一个组件中的结构来创建视图.

我想重用我的 angular 5 组件的重复模式。

将一些字符串值传递给组件很容易，我写道：

<my-component attribute1="bla" attribute2="foo"></my-component>

结合：

@Component({
    selector: 'my-component', ...
})
export class MyComponent {
    @Input() attribute1: string;
    @Input() attribute2: string;
}

现在，我想将模板片段传递给组件。理想情况下，我最终会得到这样的结果：

<my-component attribute1="bla" attribute2="foo">
    <h1>My Content</h1>
    <p>Some text<span *ng-if="important"> !!!</span></p>
</my-component>

<!-- and at some other place -->
<my-component attribute1="blubb" attribute2="blubber">
    <img src="../gala.png"/>
</my-component>

如何在我自己的组件中接收和使用那些嵌套的模板/dom 条目？

我的 Angular 应用程序中有以下场景：

MainDashboardComponent当我有 route 时可见的组件/。显然我的文件中有<router-outlet>标签app.component.html，它看起来像这样：

<app-side-menu></app-side-menu>
<div class="main-container">
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

正如你所看到的，我有一个SideMenuComponent我用来在我的所有路线上都有一个侧面菜单。在MainDashboardComponent我有一个方法，由于某种原因需要切换位于侧边菜单上的聊天元素。在SideMenuComponent我内部有一个处理聊天元素可见性切换的方法，它按预期工作。如何从我的调用此方法MainDashboardComponent并从那里切换聊天元素？

我尝试过但没有成功

我试图注入SideMenuComponent我的内部MainDashboardComponent，但是虽然toggleChat()调用了该方法，但该元素并没有改变它的可见性。看起来我有一种相同组件的多个实例，我猜...

你能帮我解决这个问题吗？谢谢！

主仪表板组件

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

@Component({
  selector: 'app-main-dashboard',
  templateUrl: './main-dashboard.component.html',
  styleUrls: ['./main-dashboard.component.scss']
})
export class MainDashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

  setFocus(id) {
    // here I'd like to call SideMenuComponent togglechat() ... 
  }
}

侧边菜单组件 …

是否可以通过绕过组件所需的所有数据来从组件生成 html 文件，而无需在浏览器视口中实际渲染它？我只想生成一些 html 代码，将其发送到后端，后端从该 html 生成 PDF。

我试图以角度7传递一个来自api的地图,从父到子组件.

parent.ts:

export class AppComponent {
  title = 'taurs-frontend';
  categories: any;
  isLoggedIn = false;

ngOnInit(){
    this.roomDataService.getData(`${environment.api_url}/api/Categories`)
    .subscribe(categories => {
      this.categories=categories
    }); 
  }

parent.html:

 <app-room-card [categories]="categories"></app-room-card> 

child.ts:

@Component({
  selector: 'app-room-card',
  templateUrl: './room-card.component.html',
  styleUrls: ['./room-card.component.css']
})
export class RoomCardComponent implements OnInit {
    @Input('categories') catname: any;

    ngOnInit() {
        console.log('aaa'+ this.catname);
    }
// ..
}

当我尝试记录变量时catname,它是未定义的.如果我尝试从父项导入变量标题,一切正常.如何将类别传递给子项,并使用API​​调用中的值填充它？

所以我有一个表格组件。但是表组件需要使用适当的 API 服务，具体取决于它是由 ComponentA 还是 ComponentB 调用。

例如，如果 ComponentB 使用 TableComponent，那么它需要让 TableComponent 注入 APIForB 服务并使用它来填充表。

角度新手，所以不确定这样的事情是否可能。

我在 Angular 项目中有自定义 Mat Auto Complete。它有 2 个后缀：清除按钮和下拉按钮。当我单击清除按钮时，代码this.myControl.reset('', { emitEvent: true });会重置输入值。但下拉面板打不开。我尝试使用以下格式但没有成功

1. this.myControl.reset();
2. this.myControl.reset（''，{emitEvent：true}）；
3. this.myControl.patchValue('');

StackBlitz 演示

自动完成显示示例.ts

.......

 clearInput() {
    this.arrowIcon = "arrow_drop_down";
    this.myControl.reset('', { emitEvent: true });
  }

......

自动完成显示示例.html

<form class="example-form">
 <mat-form-field class="example-full-width">
   <mat-label>Assignee</mat-label>
   <input
     type="text"
     matInput
     [formControl]="myControl"
     [matAutocomplete]="auto"

   />
   <div matSuffix style="display:flex">
     <button
       *ngIf="myControl!==undefined && myControl.value!==null && myControl?.value!==''"
       mat-icon-button
       aria-label="Clear"
       (click)="clearInput()"
       type="button"
     >
       <mat-icon>clear</mat-icon>
     </button>

     <button mat-icon-button aria-label="Clear" type="button">
       <mat-icon>{{arrowIcon}}</mat-icon>
     </button>
   </div>

   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (opened)="arrowIcon='arrow_drop_up'"
     (closed)="arrowIcon='arrow_drop_down'" (optionSelected)="arrowIcon='arrow_drop_down'">
     <mat-option *ngFor="let option of filteredOptions | …

我有以下结构：

在app-home我有几个没有被渲染的组件，例如一个名为<app-insightchart [applicationId]="applicationId"></app-insightchart>. 它既没有创建也没有加载（我有很多 console.logs 来验证:)）。

整个app-homeHTML 已加载，但组件未翻译（它们的标记未受影响）。

现在，如果我改为将该图表组件代码放入app-details其中，效果会非常好。

模块定义

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CreateApplicationComponent } from './admin/create/create.component';
import { EditComponent } from './admin/edit/edit.component';
import { MembersComponent } from './admin/members/members.component';
import { SummaryChartComponent } from "./charts/summary/summary.component";
import { InsightChartComponent } from "./charts/insights/insightchart.component";
import { GroupCreateComponent } from './group-create/group-create.component';
import { GroupListComponent } from './group-list/group-list.component';
import …

我有Angular Component一个Output.当我emit的event此output,一个async功能将被调用(该功能部件的外部).

在里面component,我想知道这个外部功能何时完成.有没有办法做到这一点？

这是我的组件的一些代码:

@Output() action: EventEmitter<string>;

itemClicked(item) {
    this.action.emit();
    // When the function of the observer is done: this.hideMenu();
}

这是组件外部的代码:

<my-component (action)="getData()"></my-component>


getData() : Promise<any> {
    ...
}

有没有办法检测到"getData"函数已在组件内部完成？

在AngularJS中,我可以这样做:

scope: {
    action: '&'
}
...

    scope.itemClicked = function(item) {
        $q.when(item.action()).finally(function() {
            scope.hideMenu();
        });
    };

编辑:

我正在思考另一个灵感来自Ionic复习的解决方案.如果emit()调用将组件的实例作为参数传递,该怎么办？这样getData函数可以执行以下操作:

getData(menu): Promise<any> { 
    ...
    menu.hideMenu();
}

您对此解决方案有何看法？如果你认为这是错的,那么我想我会选择Input.