标签: angular-components
Angular 1.5+组件可选单向绑定
取自AngularJS 1 文档:
您还可以通过添加
?:<?或来使绑定可选<?attr.
对于单向绑定,可选项与非可选项有何不同？
我似乎可以在我的小提琴上找出可选版本的双向(=)和委托(&)绑定的差异:https://jsfiddle.net/glenn/ze2wo0s1/,但不是单向的.
顺便说一下,圣诞快乐!❤️
推荐指数
解决办法
查看次数
Angular将一个组件作为另一个组件的ng-template传递
在我的Angular 6应用中，我需要将Component作为其ng-template传递给另一个Component 。
原因是我有一个组件A，需要多次复制，但是每次它必须包含具有相同Inputs的不同组件（我们称它们为Component B和Component C）。
组件A模板：
<div class="row-detail-panel">
<h4 class="row-detail-panel-title">{{ newEntity ? 'Add new' : 'Edit this'}} {{ entityName }}</h4>
<!--THIS IS THE COMPONENT I WANT TO INJECT-->
<app-component-b
[inline]="true"
[form]="form"
></app-component-b>
<!--END-->
<!--some more html code here-->
</div>
我使用以下方法创建一个Component A实例：
<app-component-a
[entity]="row"
[entityName]="entityName"
></app-component-a>
所以我考虑使用ng-template，因此按如下所示更改Component A模板：
<div class="row-detail-panel">
<h4 class="row-detail-panel-title">{{ newEntity ? 'Add new' : 'Edit this'}} {{ entityName }}</h4>
<ng-template></ng-template> …推荐指数
解决办法
查看次数
如何访问angularjs 1.5中的父组件
嗨,我想在angularjs中显示简单组件,其中孩子需要访问父名称.我的代码是这样的:
HTML文件:
<html>
<head>
<script type='text/javascript' src='angular.min-1.5.0.js'></script>
<script type='text/javascript' src='app.js'></script>
</head>
<body ng-app="componentApp">
<div ng-controller="helloCnt">
<hello name="Parent"></hello>
<hello1 name="Child"></hello1>
<label>List: <input name="namesInput" ng-model="names" ng-list=" | " required></label>
</div>
</body>
</html>
码:
app.component('hello', {
transclude: true,
template:'<p>Hello I am {{$ctrl.name}} and ctrl name is {{myName}}</p>',
bindings: { name: '@' },
controller: function($scope) {
$scope.myName = 'Alain';
alert(1);
}
});
app.component('hello1', {
require: {
parent: 'hello'
},
template:'<p>Hello I am {{$ctrl.name}} && my parent is {{myNameFromParent}} </p>',
bindings: { name: '@' }, …推荐指数
解决办法
查看次数
如何从子组件更改父变量？
这个问题很简单,但我无法摆脱它.
我有一个<header>父模板,我需要它通过路由模块显示子模板时消失.我期望在header标签中添加一个类,以便我可以通过CSS隐藏它.这就是我所拥有的:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
<header [class.hidden]="hide">
<h1>My App</h1>
<ul>
<li><a href="/home"></a></li>
<li><a href="/showoff"></a></li>
</ul>
</header>
<router-outlet></router-outlet>
`
})
export class AppComponent {
hide = false; // <-- This is what I need to change in child component
}
APP-routing.module.ts
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './welcome.component';
import { ShowOffComponent } from './show.off.component';
const routes: Routes = [
{ path: '', component: HomeComponent …推荐指数
解决办法
查看次数
Angular将多个模板传递给Component
我正在尝试创建一个接受多个模板作为输入的组件.这是我的例子:
@Component({
selector: 'data-list',
styles: [
require('./data-list.component.scss')
],
template: `
<ng-template
*ngFor="let item of itemsData"
ngFor let-item [ngForOf]="[item]" [ngForTemplate]="itemTemplate"
></ng-template>
`
})
export class DataListComponent {
@Input() itemsData: any[];
@ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>;
}
正如你所看到的那样,这是一个我正在尝试的相当简单的组件.该组件只接受要显示的项目的数据以及项目的模板.这个组件可以像这样使用:
<data-list [itemsData]="data">
<ng-template let-item>
<h1>{{ item.header }}</h1>
<div>{{ item.content }}</div>
</ng-template>
</data-list>
如上图所示,我正在传递模板ng-content,然后由DataListComponentwith 读取@ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>;.
我的问题是是否可以将多个模板传递给组件.
作为示例,可以传递项目的模板,但是如果它是第一项,则需要不同的模板.这意味着将对第一个项目进行检查,DataListComponent然后使用组件使用它指定的模板.
简单的例子:
我可以做这样的事情来迎合这个:
@Component({
selector: 'data-list',
styles: [
require('./data-list.component.scss')
],
template: `
<span *ngFor="let item of itemsData; let i = index" …推荐指数
解决办法
查看次数
为什么Angular 2渲染应用程序组件模板两次
我想在我的应用程序中显示常见的页眉和页脚.但是当我尝试这样做时,它会显示两次: -
app.component.html
<header>
Header
</header>
<router-outlet></router-outlet>
<footer>
Footer
</footer>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.module.ts
RouterModule.forRoot([
{path: 'home', component: AppComponent},
{path: '*', redirectTo: 'home', pathMatch: 'full'},
{path: '**', redirectTo: 'home', pathMatch: 'full'}
])
结果
Header
Header
Footer
Footer
上次我通过创建页眉和页脚的组件来解决这个问题.我知道如果我这样做会有效,但我想明白为什么这是错误的....
推荐指数
解决办法
查看次数
How to Send FormGroup Object as Output to Parent Component from child component n Angular
I'm working in forms and I have two components: my child component contains this formGroup Object :
employeeForm : FormGroup;
this.employeeForm = new FormGroup({
firstName:new FormControl(),
lastNAme:new FormControl(),
email:new FormControl()
});
the child Component conatins just a small part of the form and the parent componant, contains the global form with submit button..
my issue is: I want in the Parent Component when I click on submit button I get the form group from my child component and push it …
typescript angular-components angular angular-forms angular6
推荐指数
解决办法
查看次数
Angular 2将数据从组件发送到服务
我的目标是将数据从Angular组件发送到服务并使用服务方法来处理它.例:
export class SomeComponent {
public data: Array<any> = MyData;
public constructor(private myService: MyService) {
this.myService.data = this.data;
}
}
和服务:
@Injectable()
export class TablePageService {
public data: Array<any>;
constructor() {
console.log(this.data);
// undefined
}
}
获取数据是不确定的.如何使其工作？
javascript typescript angular-services angular-components angular
推荐指数
解决办法
查看次数
在 Visual Studio IDE 中创建/生成新 Angular 组件的简单方法？
使用 ASP.NET 核心项目（Angular）和 Visual Studio 作为我的 IDE。
有没有一种简单的方法来生成 Angular 组件文件并在 Visual Studio 的应用程序模块中注册新组件？
visual-studio angular-components angular asp.net-core-mvc-2.0
推荐指数
解决办法
查看次数
实现 ControlValueAccessor 和 Validator 的 MatFormFieldControl 创建循环依赖
我正在尝试通过实现 MatFormFieldControl、ControlValueAccessor 和 Validator 接口来创建自定义表单控件。
但是，当我提供NG_VALUE_ACCESSOR或NG_VALIDATORS...
@Component({
selector: 'fe-phone-number-input',
templateUrl: './phone-number-input.component.html',
styleUrls: ['./phone-number-input.component.scss'],
providers: [
{
provide: MatFormFieldControl,
useExisting: forwardRef(() => PhoneNumberInputComponent)
},
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PhoneNumberInputComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => PhoneNumberInputComponent),
multi: true
}
]
})
export class PhoneNumberInputComponent implements MatFormFieldControl<string>,
ControlValueAccessor, Validator, OnDestroy {
...
}
创建循环依赖：
未捕获的错误：模板解析错误：无法实例化循环依赖！控件
这有效：
@Component({
selector: 'fe-phone-number-input',
templateUrl: './phone-number-input.component.html',
styleUrls: ['./phone-number-input.component.scss'],
providers: [
{
provide: MatFormFieldControl,
useExisting: forwardRef(() => PhoneNumberInputComponent)
} …typescript angular-material angular-components angular angular5
推荐指数
解决办法
查看次数
标签 统计
angular ×8
typescript ×4
angularjs ×2
javascript ×2
angular5 ×1
angular6 ×1
components ×1
ng-template ×1