私はAngular2に2つのコンポーネントを持っています。ユーザーがcomponent1のボタンをクリックすると、sharedservice
のデータを変数に格納するメソッドがあります。この変数は、コンポーネント2 ngOnInit()
でアクセスされます。ただし、初期化された変数はngOnInit()
で定義されていません。これは、clickイベントを待機しないためです。angular2のユーザーのクリックイベントを待つ方法は?
すべてコンポーネント1では、angular2コンポーネント2のクリックイベントをどのように待機させることができますか?
JavaScriptでは、クリックイベントリスナーを使用して簡単に行うことも、コールバック関数を使用することもできますが、同じアイデアを角度で実装する方法はわかりません。
あなたのアイデアを教えてください。
これは私がこれまで持っているものです。
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);
}
}
あなたは 'Observable'を使用します。より現実的な答えを提供できるように、シナリオのコードを投稿できますか? – acdcjunior
確実なもの。 @acdcjunior – DingDong
上記の最新の編集を確認してください。 @acdcjunior – DingDong