如何在angular2中等待用户点击事件?
How to wait for user click event in angular2?
所以我在 Angular2 中有两个组件。当用户单击 component1 中的按钮时,我有一个方法将 sharedservice
中的数据存储到变量中。在 component2 ngOnInit()
中访问此变量。但是 ngOnInit()
中的变量初始化为未定义,因为它不等待点击事件。
总而言之,如何让angular2 component2 等待component1 中的点击事件?
在JavaScript中,我们可以很容易地使用点击事件监听器或回调函数来实现,但我不知道如何在angular中实现同样的想法。
能否请您分享您的想法。
这是我目前拥有的:
modules.component.html
<tr *ngFor="let module of modules" #moduleObject>
<a class="test" (click)="module._clicked = !module._clicked"></a>
<ul class="dropdown-menu" role="menu" [ngStyle]="{'display': module._clicked ? 'block' : 'none'}" >
<li><a (click)="_showDialogue =! _showDialogue; _getModuleCode(module)"><img src="../../assets/img/pencil.svg" alt="" width="13px">Edit Module</a></li>
</ul>
</tr>
我将从 modules.component.ts 中删除不必要的代码,因为它会破坏这里的所有内容
modules.component.ts
import {SharedService} from "../shared/shared.service";
import {DepartmentsService} from "./departments.service";
import {ActivatedRoute, Params} from "@angular/router";
import {Module} from "../dashboard/Module";
@Component({
selector: 'app-modules',
templateUrl: './modules.component.html',
providers: [DepartmentsService]
})
export class ModulesComponent implements OnInit {
service;
modules: Module[];
constructor(
private activatedRoute: ActivatedRoute,
service : SharedService,
private departmentsService: DepartmentsService,
route: ActivatedRoute) {
route.params.subscribe(p => {this.department = p['dname']; });
this.service = service;
}
_getModuleCode(moduleObject) {
this.departmentsService.moduleObject = moduleObject;
}
ngOnInit() { }
}
departments.service.ts
// assume necessary imports above
@Injectable()
export class DepartmentsService {
public _facultyName :string;
public _departmentName :string;
public moduleObject:Module;
constructor() {}
}
然后我从该组件调用 moduleObject 变量:
edit-forms.component.html
import {Module} from "./Module";
import {DepartmentsService} from "../components/departments.service";
//Change
@Component({
selector: 'enable-module-form',
templateUrl: './edit-forms.component.html',
providers:[ModuleService]
})
export class EnableModFormComponent {
constructor(
private moduleService: ModuleService,
private departmentService: DepartmentsService
) { }
ngOnInit(){
console.log(this.departmentService.moduleObject);
}
}
这应该有效!
部门服务:
private moduleSource = new Subject<any>();
moduleValue = this.moduleSource.asObservable();
moduleValueReceived(module) {
//emit value
this.moduleSource.next(module)
}
并且在您的 parent 中,当您有值时在服务中设置值:
_getModuleCode(moduleObject) {
this.departmentsService.moduleValueReceived(moduleObject);
}
并在您的 child 构造函数中订阅值:
constructor(
private moduleService: ModuleService,
private departmentService: DepartmentsService
) {
moduleService.moduleValue.subscribe(moduleObject => {
console.log(moduleObject); // here you have your value
})
}
Here in the official docs 你有等效的例子,比我提供的解释更进一步。
希望对您有所帮助!
所以我在 Angular2 中有两个组件。当用户单击 component1 中的按钮时,我有一个方法将 sharedservice
中的数据存储到变量中。在 component2 ngOnInit()
中访问此变量。但是 ngOnInit()
中的变量初始化为未定义,因为它不等待点击事件。
总而言之,如何让angular2 component2 等待component1 中的点击事件?
在JavaScript中,我们可以很容易地使用点击事件监听器或回调函数来实现,但我不知道如何在angular中实现同样的想法。
能否请您分享您的想法。
这是我目前拥有的:
modules.component.html
<tr *ngFor="let module of modules" #moduleObject>
<a class="test" (click)="module._clicked = !module._clicked"></a>
<ul class="dropdown-menu" role="menu" [ngStyle]="{'display': module._clicked ? 'block' : 'none'}" >
<li><a (click)="_showDialogue =! _showDialogue; _getModuleCode(module)"><img src="../../assets/img/pencil.svg" alt="" width="13px">Edit Module</a></li>
</ul>
</tr>
我将从 modules.component.ts 中删除不必要的代码,因为它会破坏这里的所有内容
modules.component.ts
import {SharedService} from "../shared/shared.service";
import {DepartmentsService} from "./departments.service";
import {ActivatedRoute, Params} from "@angular/router";
import {Module} from "../dashboard/Module";
@Component({
selector: 'app-modules',
templateUrl: './modules.component.html',
providers: [DepartmentsService]
})
export class ModulesComponent implements OnInit {
service;
modules: Module[];
constructor(
private activatedRoute: ActivatedRoute,
service : SharedService,
private departmentsService: DepartmentsService,
route: ActivatedRoute) {
route.params.subscribe(p => {this.department = p['dname']; });
this.service = service;
}
_getModuleCode(moduleObject) {
this.departmentsService.moduleObject = moduleObject;
}
ngOnInit() { }
}
departments.service.ts
// assume necessary imports above
@Injectable()
export class DepartmentsService {
public _facultyName :string;
public _departmentName :string;
public moduleObject:Module;
constructor() {}
}
然后我从该组件调用 moduleObject 变量:
edit-forms.component.html
import {Module} from "./Module";
import {DepartmentsService} from "../components/departments.service";
//Change
@Component({
selector: 'enable-module-form',
templateUrl: './edit-forms.component.html',
providers:[ModuleService]
})
export class EnableModFormComponent {
constructor(
private moduleService: ModuleService,
private departmentService: DepartmentsService
) { }
ngOnInit(){
console.log(this.departmentService.moduleObject);
}
}
这应该有效!
部门服务:
private moduleSource = new Subject<any>();
moduleValue = this.moduleSource.asObservable();
moduleValueReceived(module) {
//emit value
this.moduleSource.next(module)
}
并且在您的 parent 中,当您有值时在服务中设置值:
_getModuleCode(moduleObject) {
this.departmentsService.moduleValueReceived(moduleObject);
}
并在您的 child 构造函数中订阅值:
constructor(
private moduleService: ModuleService,
private departmentService: DepartmentsService
) {
moduleService.moduleValue.subscribe(moduleObject => {
console.log(moduleObject); // here you have your value
})
}
Here in the official docs 你有等效的例子,比我提供的解释更进一步。
希望对您有所帮助!