- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有组件 search-component
如下 html 片段
<form class="form-horizontal form-material" (ngSubmit)="Search()" id="carsearch" [formGroup]="bookCarForm"
novalidate>
<div class="row">
<div class="col-sm search-input-align">
<input [owlDateTime]="dt1" [min]="min" [owlDateTimeTrigger]="dt1" class="form-control" formControlName="start_datetime"
placeholder="Start Date & Time">
<owl-date-time #dt1></owl-date-time>
<span class="input-group-addon"><i class="fa fa-calendar fa-search-align"></i></span>
</div>
<div class="col-sm search-input-align">
<input [owlDateTime]="dt2" [min]="min" [owlDateTimeTrigger]="dt2" class="form-control" formControlName="end_datetime"
placeholder="End Date & Time">
<owl-date-time #dt2></owl-date-time>
<span class="input-group-addon "><i class="fa fa-calendar "></i></span>
</div>
<div class="col-sm search-input-align">
<div class="toggle" (click)=toggleTextBox()>
<input type="checkbox" class="check" >
<b class="b switch"></b>
<b class="b track"></b>
</div>
<h4 id="door-delivery">Door Delivery</h4>
</div>
<div class="col-sm search-input-align address">
<div *ngIf="!visability">
<input class="form-control " formControlName="Enter_address" type="text" placeholder="Enter Address"
>
</div>
<div *ngIf="visability">
<select formControlName="p_location" class="form-control selectpicker" id="select-city" >
<option data-tokens="" disabled>
<h2>select any one </h2>
</option>
<option data-tokens="Delhi">
<h2>Hebbal</h2>
</option>
<option data-tokens="Mumbai">
<h2>Yelahanka</h2>
</option>
<option data-tokens="hyderabad">
<h2>BTM</h2>
</option>
</select>
</div>
</div>
<div class="col-sm search-input-align btn-book-now">
<button type="submit" [disabled]="bookCarForm.invalid" class="btn btn-primary align-items-center btn-align">Book
Now</button>
</div>
</div>
</form>
在 search-component.ts
中,如下所示
@Output() searchValues = new EventEmitter();
this.storage.set("values", this.Search.value);//storing values in local storage
this.searchValues.emit("values");
这个search-component
是可重用的。目前我在 Page1
中使用此表单选择 page1
中的值并重定向到 page2
。在 page2 中,我也在使用这种形式。 page1 中给出的所有值是多少,应该传递给 page2。所以我尝试了 Event Emitter
但它不是结转值。 I tried this link ,但这并不能帮助我。实现此输出的最佳方法是什么。谁能帮帮我。
最佳答案
创建以下服务 stored-data-service.ts:
import {Component, Injectable} from 'angular2/core'
import {BehaviorSubject, Observable} from 'rxjs';
@Injectable()
export class StoredDataService {
values:any;
values$:BehaviorSubject<any> = new BehaviorSubject('');
constructor(){}
setValues(values){
this.values = values;
this.values$.next(values);
}
}
然后通过导入将其添加到您的app.modules.ts
import { StoredDataService } from "./stored-data-service.ts";
然后将其添加到 NgModule 中的 providers 数组中
@NgModule({
declarations: [
...],
imports: [
...],
providers: [
StoredDataService],
bootstrap: [AppComponent]
})
现在通过将它添加到构造函数中,将其注入(inject)到组件 search-component.ts
中,如下所示:
constructor (public storedDataService: StoredDataService){}
最后用它来添加数据
this.storedDataService.setValues(this.Search.value);//storing values in local storage
要在代码中的任何位置检索数据(即使在其他组件或服务中,这就是诀窍),您需要订阅值$:
const subscription = this.storedDataService.values$.subscribe( (values) => {
//set a local variable here storing values in you component
//...
this.values = values
console.log (values);
})
如果您要在另一个组件中再次使用服务 StoredDataService,请记住像以前一样将其注入(inject)构造函数并订阅值 $。每当您的代码的任何部分调用 storedDataService.changeValues(...) 时,无论您在何处订阅,您的订阅者的回调都会被执行,从而为您提供新值。
编辑
我改了代码,添加了BehaviorSubject和订阅,不然不行
关于angular - 可重复使用的组件值转入第 2 页/任何其他页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52272472/
这个问题已经有答案了: How do I convert NetBeans form and its class to something usable in IntelliJ IDEA form e
我有以下 JavaScript 代码,需要在 PHP 文件中执行。我需要知道如何在这段 javascript 代码中输入 php 标签。 我是网络编程新手。 这里使用的javascript是将html
我正尝试在 Swift 中完成以下任务,但需要一些帮助。 它是一个静态表,当一个单元格被选中时,我需要它来将该单元格的文本保存在一个变量中,并推送到我的下一个 View 。我正在使用 prepareF
在我的 MVC 应用程序的服务层中,我尝试将 linq to sql 实体结果转换为我的业务模型实体。我目前正在尝试以下代码: public IList GetAllProjects()
我正在开发一个允许俱乐部成员(member)注册的网站。表单中的信息应该存储到 MySQL 数据库中。我已经通过存储和读取 XML 样式文本文件来完成此任务,但现在我必须将其转换为 MySQL。以下是
我的应用程序有一个 Java servlet,它从请求中读取 JSONObject 并构造一些在其他地方使用的 Java 对象。我遇到了一个问题,因为 JSON 中的字符串是用 ISO-8859-1
我是一名优秀的程序员,十分优秀!