Angular 2发送阵列另一页

Question

我正在开发与Angular的天气应用。我是Angular的新手。我想带来我选择的城市的天气信息。但我无法将数据发送到第二页。哪里有问题？预先感谢您的帮助。

export class ForecastComponent implements OnInit, OnDestroy { 
 
    
 
    constructor(private service: WeatherService, private router: Router, private route: ActivatedRoute) { } 
 

 
    public items: Array<string> = ["ADANA", "ADIYAMAN", "AFYONKARAHİSAR", "AĞRI", "AMASYA", "ANKARA", "ANTALYA", "ARTVİN"]; 
 

 
    public selectedValue: BaseModel; 
 
    value: any = {}; 
 
    weatherClass: Weather; 
 

 
    ngOnInit() {} 
 

 
    ngOnDestroy(): void { 
 
    this.route.data.subscribe(
 
     (data: { weatherClass: Weather }) => { 
 
     this.weatherClass = data.weatherClass; 
 
     } 
 
    ) 
 
    } 
 
    public selected(value: any): void { 
 
    console.log('Selected value is: ', value); 
 
    } 
 

 
    public removed(value: any): void { 
 
    console.log('Removed value is: ', value); 
 
    } 
 

 
    public typed(value: any): void { 
 
    console.log('New search input: ', value); 
 
    } 
 

 
    public refreshValue(value: any): void { 
 
    this.value = value; 
 
    } 
 
    sendCityWeather(value: Array<BaseModel>) { 
 
    this.service.otherWeather(this.value.text).subscribe(
 
     (data) => { 
 
     this.weatherClass = new Weather(data.name, data.main.temp, data.weather[0].description, data.main.temp_min, data.main.temp_max, data.weather[0].icon); 
 
     console.log(this.weatherClass); 
 
     this.router.navigate(['/weather']); 
 
     } 
 
    ) 
 
    } 
 
}

export class WeatherComponent implements OnInit, OnDestroy { 
 

 
    weatherClass: Weather; 
 
    value: any = {}; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 
    
 
    ngOnInit() { 
 
    this.service.otherWeather(this.value.text).subscribe(
 
     (data: Weather) => { 
 
     this.weatherClass = data; 
 
     } 
 
    ) 
 
    } 
 

 
    ngOnDestroy(): void { 
 
    }

export class WeatherService { 
 

 
    weatherClass: Weather; 
 

 
    constructor(private http:Http) { } 
 

 
    otherWeather(city:string){ 
 
    return this.http.get(`http://api.openweathermap.org/data/2.5/weather?appid=0f3fb9fa31ad3d41f1bb2bd0841c3f2f&q=${city}&units=imperial&cnt=10`).map((response:Response) => response.json()); 
 
    
 
    } 
 
}

Answer 1

有两种方法可以将数据传递到COMPONE使用EventEmmiters @Output()或EventReceiver @Input()或使用服务。 您可以将数据从父组件传递到子组件中的@Input()子组件。这里有一个例子：

@Component({ 
 
    selector: 'app-parent', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ParentComponet implements OnInit { 
 

 
    parentData: Weather; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
 

 
    } 
 

 
} 
 

 

 
@Component({ 
 
    selector: 'app-child', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ChildComponet implements OnInit { 
 

 
    @Input() childData: Weather; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
 

 
    } 
 

 
}

<!-- Parent html --> 
 

 
<app-child [childData]="parentData"></app-child>

以上将数据传递到app-child，但这种方法需要您到子组件导入到母部件。

我更喜欢服务方式，因为它可以作为服务添加而不是组件。下面是这样一个例子：

export class WeatherService { 
 

 
    weatherClass: Weather; 
 
    
 
    //BehaviorSubject can store the last value given until the service destroyed or otherwise changed 
 
    private data: BehaviorSubject<Weather> = new BehaviorSubject(null); 
 

 
    constructor(private http: Http) {} 
 

 
    otherWeather(city: string) { 
 
    return this.http.get(`http://api.openweathermap.org/data/2.5/weather?appid=0f3fb9fa31ad3d41f1bb2bd0841c3f2f&q=${city}&units=imperial&cnt=10`).map((response: Response) => response.json()); 
 
    } 
 
    
 
    setData(value: Weather) { 
 
    this.data.next(value); 
 
    } 
 
    
 
    getData(): Observable<Weather> { 
 
    return this.data.asObservable(); 
 
    } 
 
}

@Component({ 
 
    selector: 'app-parent', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ParentComponet implements OnInit { 
 

 
    parentData: Type = ["ADANA", "ADIYAMAN", "AFYONKARAHİSAR", "AĞRI", "AMASYA", "ANKARA", "ANTALYA", "ARTVİN"];; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
    this.service.otherWeather(this.value.text).subscribe((data: Weather) => { 
    this.service.setData(data); 
    }); 
 
    } 
 

 
} 
 

 

 
@Component({ 
 
    selector: 'app-child', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ChildComponet implements OnInit { 
 

 
    childData: Weather; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
 
    this.service.getData.subscribe((vales: Weather) => { 
 
     this.childData = vales; 
 
    }); 
 
    } 
 

 
}

通过这种方法，你会发现，数据不会返回通俗易懂和代码不会等待数据。您必须在subscribe()区块内执行与数据相关的任何TypeScript逻辑才能正常工作。当值改变时，HTML会自动更新。在BehaviorSubject的值发生变化时使用此方法，订阅getData()方法的任何地方也会收到新数据。

如果您需要任何帮助，请留下评论。