如何在Angular2中等待用户点击事件？

Question

如何在Angular2中等待用户点击事件？

angulartypescriptangular2-formsangular2-services

4

我有两个Angular2组件。当用户在组件1中点击按钮时，我有一个方法将sharedservice中的数据存储到变量中。在组件2的ngOnInit()中访问此变量。但是，在ngOnInit()中初始化变量为未定义，因为它不等待单击事件。

总的来说，我该如何让Angular2组件2等待组件1的单击事件？

在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中删除不必要的代码，因为它只会使这里的一切变得混乱。

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);
  }

}

- DingDong

你可以使用 Observable。你能否发布一些你的场景代码，这样我们就可以给你一个更现实的答案？ - acdcjunior

当然。请检查我上面的最新编辑 @acdcjunior。 - DingDong

有什么进展吗？@acdcjunior - DingDong

你能否详细说明一下我如何使用observable？@acdcjunior - DingDong

@Günter Zöchbauer - DingDong

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AT82 · Accepted Answer

这应该可以工作！

DepartmentService：

private moduleSource = new Subject<any>();
moduleValue = this.moduleSource.asObservable();

moduleValueReceived(module) {
  //emit value
  this.moduleSource.next(module)
}

在您的父组件中，当您设置了值时，在服务中设置该值：

_getModuleCode(moduleObject) {
   this.departmentsService.moduleValueReceived(moduleObject);
}

在您的子构造函数中订阅该值：

constructor( 
  private moduleService: ModuleService, 
  private departmentService: DepartmentsService 
) { 
     moduleService.moduleValue.subscribe(moduleObject => {
        console.log(moduleObject); // here you have your value
     })
  }

在官方文档这里，你可以找到比我提供的更详细的等效示例和解释。

希望能有所帮助！