在一个Angular应用程序中,我看到它@Component有属性moduleId.这是什么意思？
当module.id没有在任何地方定义时,该应用仍然有效.它怎么还能运作？
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
我有两个组件如下,我想从另一个组件调用一个函数.这两个组件都包含在第三个父组件using指令中.
第1部分:
@component(
selector:'com1'
)
export class com1{
function1(){...}
}
第2部分:
@component(
selector:'com2'
)
export class com2{
function2(){...
// i want to call function 1 from com1 here
}
}
我已经尝试使用@input和@output,但我不明白究竟是如何使用它,以及如何调用该函数,任何人都可以帮忙吗？
我有一个实现,其中父级希望通过使用@Input子组件中可用的参数将某些数据传递给子组件.但是,此数据传输是可选的,父母可能会或可能不会根据要求传递它.是否可以在组件中包含可选的输入参数.我在下面描述了一个场景:
<parent>
<child [showName]="true"></child> //passing parameter
<child></child> //not willing to passing any parameter
</parent>
//child component definition
@Component {
selector:'app-child',
template:`<h1>Hi Children!</h1>
<span *ngIf="showName">Alex!</span>`
}
export class child {
@Input showName: boolean;
constructor() { }
}
我有自定义组件:
@Component({
selector: 'my-custom-component',
templateUrl: './my-custom-component.html',
styleUrls: ['./my-custom-component.css']
})
export class MyCustomComponent {
constructor() {
console.log('myCustomComponent');
}
}
我可以像这样使用它:
<my-custom-component></my-custom-component>
但我怎么能传递一个变量呢？例如:
<my-custom-component custom-title="My Title"></my-custom-component>
并在我的组件代码中使用它？
我有一个Angular 2组件,我想<div id ="myId">通过它的id 检索一个元素div
.我尝试:document.getElementById("myId")在我的组件(TypeScript)中,但我收到一个错误:"找不到名称文档".我看到在其他帖子中我们可以使用@ViewChild做类似的事情,但是我看不出我们如何使用div,任何想法？
鉴于以下代码,我尝试测试ngOnChangesAngular2 的生命周期钩子:
import {
it,
inject,
fdescribe,
beforeEachProviders,
} from '@angular/core/testing';
import {TestComponentBuilder} from '@angular/compiler/testing';
import {Component, OnChanges, Input} from '@angular/core';
@Component({
selector: 'test',
template: `<p>{{value}}</p>`,
})
export class TestComponent implements OnChanges {
@Input() value: string;
ngOnChanges(changes: {}): any {
// should be called
}
}
fdescribe('TestComponent', () => {
let tcb: TestComponentBuilder;
beforeEachProviders(() => [
TestComponentBuilder,
TestComponent,
]);
beforeEach(inject([TestComponentBuilder], _tcb => {
tcb = _tcb;
}));
it('should call ngOnChanges', done => {
tcb.createAsync(TestComponent).then(fixture => {
let testComponent: …我有一个父组件,它在点击链接时打开一个新组件,这个新组件应该有一个关闭按钮,在关闭时向父发送一个关闭消息并销毁自己.
我们可以使用ngOnDestroy方法发送结束消息,但是如何调用子组件的销毁.
<parent>
<child></child> //child to be opened on click but close
//event should be inside the child componenet
</parent>
如果我在这里遇到一些概念错误,请纠正我.谢谢
我玩过Angular 2组件及其组合,我遇到了丑陋的行为,这是由本机事件冒泡和@Output名称冲突引起的.
我在模板中有表单的组件应用程序表单
<form (ngSubmit)="submitButtonClicked($event)">
<input type="text"/>
<button type="submit">Send</button>
</form>
我在app-middle组件中使用此表单组件,该组件具有名称提交的自己的事件发射器.
@Component({
selector: 'app-middle',
templateUrl: './middle.component.html',
styleUrls: ['./middle.component.css']
})
export class MiddleComponent implements OnInit {
@Output() submit = new EventEmitter<string>();
constructor() { }
emitSubmitEvent() {
this.submit.emit("some data");
}
}
模板:
<div>
<app-form></app-form>
</div>
和模板的app组件:
<app-middle (submit)="submitListener($event)"></app-middle>
现在,将调用submitListener
我想,"寄生"行为是基于DOM事件冒泡的.我可以通过submitButtonClicked处理程序中的event.stopPropagation()来阻止它,但如果我忘记了它,我会得到非常难看的错误.
一般来说,我认为这种行为非常危险.如果我没有错,那么每个事件绑定表达式处理程序都可能被内部组件的本机事件"寄生地"调用.如果与任何DOM事件具有相同的名称(https://developer.mozilla.org/en-US/docs/Web/Events)并且我不谈论向前兼容性....
您可以在此处看到相同的问题:https://bitbucket.org/winsik/submit-event-issue/src
你遇到过这个问题吗？你如何命名你的@Outputs？
我想创建服务,它可以与一个组件进行交互.我的应用程序中的所有其他组件应该能够调用此服务,并且此服务应该与此组件交互.
如何从服务中调用组件方法？
@Component({
selector:'component'
})
export class Component{
function2(){
// How call it?
}
}
从这个服务？
@Injectable()
export class Service {
callComponentsMethod() {
//From this place?;
}
}
typescript angular2-services angular2-injection angular2-components angular
我正在使用angular2开发一个应用程序.我有一个场景,我需要在路由时使用复杂数据(对象数组)从一个组件传递到另一个组件(它们不是父子,它们是两个独立的组件)(使用router.navigate()).我用Google搜索了这一点,大部分结果都描述了父子组件的场景.我已经完成了结果并找到了传递数据的方法.
1)创建共享服务2)作为路由参数传递
第二种方法对我有效(尽管如此,当我有如上所述的复杂数据时,我不喜欢这种方法).我无法使用共享服务共享数据.所以我的问题是,使用服务的组件之间传递数据只在组件处于父子关系时才有效吗？另外,请告诉我是否还有其他优先方法可以在一个组件和另一个组件之间传递数据？
更新:我在我的场景中添加了一些代码.请让我知道为什么通过共享服务传递数据不起作用的错误.
我有2个组件:1)SearchComponent 2)TransferComponent我在SearchComponent中设置数据,并希望通过utilityService访问TransferComponent中的数据.
公用事业服务
import {Injectable} from "@angular/core";
@Injectable()
export class UtilityService{
constructor(){
}
public bioReagentObject = [];
routeBioReagentObj(bioReagentObj){
console.log("From UtilityService...", bioReagentObj);
for (let each of bioReagentObj)
this.bioReagentObject.push(each)
// console.log("From UtilityService",this.bioReagentObject);
}
returnObject(){
console.log("From UtilityService",this.bioReagentObject);
return this.bioReagentObject
}
}
searchcomponent.ts
import {UtilityService} from "../services/utilityservice.component";
import {Component, OnInit, OnDestroy, Input} from '@angular/core';
@Component({
selector: 'bioshoppe-search-details',
providers: [UtilityService],
templateUrl: 'app/search/searchdetails.component.html',
styleUrls: ['../../css/style.css']
})
export class SearchDetailsComponent implements OnInit, OnDestroy {
constructor(private route: ActivatedRoute,
private utilityService: UtilityService,
private router: Router) …