标签: angular-components

我有许多角度1.5组件,都采用相同的属性和数据结构.我认为它们可以重新考虑到单个组件中,但我需要一种基于type属性的插值来动态选择模板的方法.

var myComponentDef = {
    bindings: {
        type: '<'
    },
    templateUrl: // This should be dynamic based on interpolated type value
};

angular.module('myModule').component('myComponent', myComponentDef);

我不能使用,templateUrl function($element, $attrs) {}因为它中的值$attrs是非插值的,所以我不会得到传入数据中指定的类型.

我可以只有一个带有一系列ng-if或ng-switch指令的大模板,但我想将模板分开.

或者,我可以将组件分开并ng-switch在父组件中使用等,但我不喜欢这样,因为它看起来像是很多重复.

我正在寻找一种解决方案,我可以使用插入type传递到绑定中的插值来匹配每种类型的模板URL,然后将用于构建组件.

这可能吗？

谢谢

我有一个奇怪的问题,我的子表单的表单提交事件在我的父表单上触发了两次.

child.component.html

<form [formGroup]="childForm" (ngSubmit)="childFormSubmit()">
  ...
</form>

child.component.ts

@Component({
  selector: 'child-form',
  templateUrl: 'login.component.html',
})

export class ChildComponent {
  @Output() submit = new EventEmitter<any>();

  public childForm: FormGroup;

  childFormSubmit() {
    if (this.childForm.valid) {
      console.log('Child Form Submit')
      this.submit.emit(this.childForm.value);
    }
  }
}

parent.component.html

<child-form (submit)="parentSubmit($event)"></child-form>

parent.component.ts

@Component({
  selector: 'parent',
  templateUrl: 'parent.component.html',
})

export class ParentComponent {

  constructor() {
  }

  parentSubmit(event: any) {
    console.log('Parent Submit');
  }
}

提交子表单会在控制台输出中产生以下结果:

Child Form Submit
Parent Submit
Parent Submit

我正在将购买的第三方模板转换为Angular 5应用程序,并且遇到了错误.我对Angular 5很新(但我知道AngularJS很好)并且不明白它试图告诉我什么？它似乎与显示/隐藏顶部导航栏的按钮有关.

错误消息(来自浏览器):

Error: Template parse errors:
No provider for ControlContainer ("imalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      [ERROR ->]<form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-gro"): ng:///AppModule/TopNavigationNavbarComponent.html@4:6

component.html:

<div class="row border-bottom">
  <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <a class="minimalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      <form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-group">
          <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
        </div>
      </form>
    </div>
    <ul class="nav navbar-top-links navbar-right">
      <li>
        <a href="#">
          <i class="fa fa-sign-out"></i> Log out …

从我的自定义组件中使用的父组件重新初始化formGroup时遇到问题.我得到的错误是:

没有FormControl实例附加到具有名称的表单控件元素:'selectedCompany'

HTML:

<form [formGroup]="addForm">
     ...
     <my-custom-component formControlName="selectedCompany"></my-custom-component>
     ...
</form

<my-custom-component>是根据创建自定义formControl组件的有效方式创建的:https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html#implementing-controlvalueaccessor

零件

这是初始化formGroup变量的代码addForm:

let formTemp: any = {
    selectedCompany: new FormControl(null, [Validators.required]),
}

this.addForm = this._formBuilder.group(formTemp);

第一次addForm初始化一切都很好.但是当我重新打开表单所在的模态,并且执行相同的组件代码时,会发生上述错误.

角度7.2.13

使用浏览器后退按钮导航时，将加载组件的HTML，但未加载组件css / js，并且页面将挂起。

但是，通过链接单击或router.navigateByUrl（）导航或重新加载页面时，加载工作正常。但是使用前进/后退按钮导航时绝对不会。

我没有控制台错误。

它可以在开发服务器上完美运行http://localhost:4200/。仅在生产中会发生此问题。

更新

这是在儿童路线中发生的。

更新2

无法在具有相同路由结构的Stackblitz中复制问题。 https://angular-tpsr5z.stackblitz.io/。

更新3

当它挂起时，将同时显示先前和新的路线html。

像这样挂起后，如果我单击任何触发组件方法或更改组件属性的组件，则组件将立即加载。

更新4

打包杰森

{
  "name": "tuilder-ng",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.13",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.13",
    "@angular/compiler": "^7.2.13",
    "@angular/core": "^7.2.13",
    "@angular/forms": "^7.2.13",
    "@angular/http": "^7.2.13",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^7.2.13",
    "@angular/platform-browser-dynamic": "^7.2.13",
    "@angular/router": "^7.2.13",
    "@ecodev/fab-speed-dial": "^3.1.0",
    "@google/markerclustererplus": "^2.1.11",
    "@swimlane/ngx-charts": "^10.1.0",
    "@types/googlemaps": "^3.30.19",
    "@types/lodash": …

我正在编写一个AngularJS组件,我想知道将ngdoc注释添加到组件本身和控制器功能的正确方法是什么.

你有什么例子吗？

考虑以下组件sidebar.component.html:

<div class="sidebar">
  <ul>
    <li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to the dashboard">
      <a href="#">
        <i class="material-icons">home</i>
        <span>Home</span>
      </a>
    </li>
    <li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Manage your times">
      <a href="#">
        <i class="material-icons">watch_later</i>
        <span>Times</span>
      </a>
    </li>
    <li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to settings">
      <a href="#">
        <i class="material-icons">settings</i>
      </a>
    </li>
  </ul>
</div>

在app.component.html,我使用侧边栏使用其标签(<sidebar>).但是,现在我想制作它,以便<li>在<sidebar>标签内部给出元素,这样它们就不再在内部sidebar.component.html使元件可以重复使用了.

我不确定这叫什么,我找不到它.

提前致谢.

我正在玩Angular2,并试图让一个模块(BreadcrumbDemoModule)导入另一个(BreadcrumbModule)的组件.

目前,BreadcrumbModule只包含一个组件:ng2-breadcrumb.但是,当我尝试使用此组件时BreadcrumbDemoModule,我收到错误消息:

'ng2-breadcrumb'不是已知元素.

我想我必须在某个地方错过一条线,并希望有人可以向我指出我做错了什么.

非常感谢你提前!

BreadcrumbModule的文件

breadcrumb.component.html:

THIS IS A BREADCRUMB TEST

breadcrumb.component.ts:

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

@Component({
  selector: 'ng2-breadcrumb',
  template: require('./breadcrumb.component.html')
})
export class BreadcrumbComponent {}

组件/面包屑/ index.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BreadcrumbComponent } from './breadcrumb.component';

@NgModule({
  imports: [
    BrowserModule //for later use
  ],
  declarations: [
    BreadcrumbComponent
  ]
})
export class BreadcrumbModule {}

BreadcrumbDemoModule的文件

面包屑demo.component.html:

<ng2-breadcrumb></ng2-breadcrumb>

面包屑demo.component.ts:

import { …

我想设置<ng-content>动态实例化组件的主体ComponentFactoryResolver.

我看到我可以使用输入和输出访问ComponentRef,但不能设置<ng-content>.

请注意<ng-content>我计划设置可以包含简单文本/可以跨越动态创建的组件

@Component({
    selector: 'app-component-to-project',
    template: `<ng-content></ng-content>`
})
export class ComponentToProject implements AfterContentInit {

    ngAfterContentInit() {
        // We will do something important with content here
    }

}


@Directive({
    selector: 'appProjectionMarker'
})
export class ProjectionMarkerDirective implements OnInit {

    constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {
    }

    ngOnInit() {
        const componentFactory: ComponentFactory<ComponentToProject> = this.componentFactoryResolver.resolveComponentFactory(ComponentToProject);
        const componentRef: ComponentRef<ComponentToProject> = this.viewContainerRef.createComponent(componentFactory);
        // Question: How to set content before the child's afterContentInit is invoked …

我正在尝试构建一个结构指令,它将通过使用其选择器(静态)或通过调用其公共方法(动态)来调用父DOM结构.

• 在html模板中使用指令选择器可以正常工作而不会出现任何问题.

• 我试图弄清楚我们是否在模板中使用它并通过调用指令方法实现相同.

我-directive.ts

@Directive({ selector: '[sampleDirective]' })

export class SampleDirective {
    ...
   constructor(..) {
        this.customDirective();
     }
  }
customDirective() {
    console.log('Inside customDirective()');
}

我-component.ts

import { SampleDirective } from './my.directive';
...
@Component({
 selector: 'my-component',
 template: `<button (click)="click()"> Click Me </button>`
})
constructor() { }
..
click() {
  // call directive method here
}

我需要这个,因为我正在创建一个通用的解决方案,在运行时借助指令更改组件的DOM结构.

**如果有任何拼写错误,请忽略.抱歉,我无法在此处粘贴完整代码