如何在Angular中将html http响应渲染到新页面或新组件？
在Angular中，可以通过以下步骤将HTML HTTP响应渲染到新页面或新组件：
- 首先，确保已经导入了必要的模块和服务。在组件文件的顶部，导入
HttpClient模块和Router服务：
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';- 在组件的构造函数中注入
HttpClient和Router：
constructor(private http: HttpClient, private router: Router) { }- 创建一个方法来发送HTTP请求并渲染响应。在该方法中，使用
http.get()方法发送GET请求，并订阅响应：
renderResponse() {
this.http.get('your-api-url').subscribe((response: any) => {
// 在这里处理响应数据
// 可以将响应数据存储在组件的属性中，以便在模板中使用
// 例如：this.responseData = response;
// 导航到新页面或新组件
this.router.navigate(['your-route']);
});
}- 在模板中，可以通过调用上述方法来触发HTTP请求并渲染响应。例如，可以在按钮的点击事件中调用该方法：
<button (click)="renderResponse()">渲染响应</button>以上步骤将在Angular中实现将HTML HTTP响应渲染到新页面或新组件的功能。请注意，这只是一个基本示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。
关于Angular和相关概念的更多信息，可以参考腾讯云的相关产品和文档：
- 腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
相关·内容
我想在jsp页面中对spring mvc控制器进行一个角度http调用(通过提交json数据)，我不想得到对角度http调用的响应，相反，我想从spting mvc控制器加载一个新的jsp页面，并执行控制器方法。
如果有任何不同的进程，可以共享控制器方法如何编写(用于加载新页面而不是将响应发送回angular http调用)和angular http调用。
浏览 1提问于2016-12-29得票数 1
我已经创建了一个Angular应用程序，允许用户对特定的媒体文件(如视频)进行评论。当发表评论时，它会调用http POST将评论存储在数据库中。
加载组件时，ngOnInit通过调用http GET从数据库加载所有注释。但是，当新的评论发布时，如果不刷新页面，评论是不会更新的。他们有没有一种在发表评论时不刷新页面就能更新评论列表的方法？
浏览 7提问于2017-08-06得票数 0
回答已采纳
1回答
我正在使用角度渲染引擎来渲染材质组件。但是当我呈现控件(在我的case Cards => mat-card中)时，它们没有任何样式。所以prebuilt-themes(node_modules\@angular\material\prebuilt-themes自带的所有东西)。
当我手动添加卡片时，=>
<mat-card> test</mat-card>
并在渲染过程中设置类属性，它工作于=>
renderer.setAttribute(matCard , "class", "mat-card");
所
浏览 12提问于2018-02-14得票数 2
回答已采纳
2回答
我是新来的angular
我已经使用此链接https://cli.angular.io/创建了新项目
此处显示的是来自appcomponent.html的主页
我已经在SRC >> pages >> index.html和index.ts中创建了新页面。
我在appcomponent.ts和appmodule.ts中导入这些页面
如何将默认主页设置为索引。
这是我的应用程序组件页面
import { Component } from '@angular/core';
import { Http, Headers } from '@angular/
浏览 0提问于2017-11-23得票数 3
在我为Angular 2找到的示例中，每个应用程序可以创建一次组件：
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
浏览 2提问于2016-02-10得票数 4
我是Angular 9的新手，我有一个程序，用户在这个程序中输入一个名字-提交后，发送一个POST HTTP请求并存储名字。然后，我有一个子头的不相关组件，它列出了使用ngOnInit()的GET HTTP请求存储的名称。但是，我需要该子标题在每次输入新列表时动态更新该名称列表，而不仅仅是在组件实例化时更新。
我不确定该如何继续。我肯定我可以简单地添加一个按钮来获取和更新上述列表，但尝试更动态的东西。提前感谢！
//SERVICE.TS...
import { Injectable } from '@angular/core';
import { HttpClient } f
浏览 0提问于2020-06-23得票数 0
我正在处理Angular http post服务调用，并且有来自java服务的api，为了从这个服务获得响应，我必须将数据/请求参数传递给url，这是通过给出一个名为body的变量，然后用url传递它来实现的。 我使用的是angular reactive表单，从这里的表单字段中，我希望将请求参数发送到正文，例如当用户填写他提交的表单时，这将作为请求，并且他从这些字段计算后获得特定的数据作为响应 这是我的服务调用，我在其中传递硬编码值，但在这里我如何将formcontrolname name值传递给主体？ getPoll(): Observable<PollData[]>
浏览 17提问于2019-02-20得票数 0
回答已采纳
comment.component.ts:
import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router'
import { Comment } from 'comment entity path'
import {CommentService} from 'comment service path'
import { Observable } from 'rxjs/Observable';
@Co
浏览 0提问于2017-03-16得票数 6
回答已采纳
因此，我正在构建一个angular2静态站点模板，其中的主页面是用标记文件编写的。
我需要能够有工作链接，在标记下编写，而不是刷新页面。
示例页面可能是：
@Component({
selector: 'sample-page',
providers: [],
template: `
<div innerHtml="{{text | markdown}}"></div>
`,
styleUrls: [],
directives: [ROUTER_DIRECTIVES],
浏览 0提问于2016-04-30得票数 4
1回答
我有一个名为queryData的类变量，它存储使用http接收的json响应。但是，模板不会使用接收到的json更新。
我的main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import { HTTP_PROVIDERS } from 'angular2/http';
bootstrap(AppComponent,[ HTTP_PROVIDERS ]);
app.compone
浏览 2提问于2016-04-24得票数 0
回答已采纳
我在从ActivatedRoute获取用于Http请求的参数时遇到了问题。基本上，我试图获取this.link并在我的DataService上使用它来发出Http请求。当用户访问DetailsComponent时，我不想使用这个路由参数来形成Http请求。例如，用户导航到example.com/体/ cat，我想在Get请求中使用cat。然而，每次我尝试，我都会收到一个回复，告诉我this.link是未定义的。
GET http://123.123.123.123/api/v2/_table/animal/undefined?related=move_by…k&api_key=7201
浏览 10提问于2016-07-27得票数 0
3回答
我在localhost:8080/stream上运行我的流式web服务，当任何新消息添加到订阅的mqtt流中时，它都会响应。我想在我的Angular2应用程序中使用这个web服务。我正在使用RxJS在Angular2中使用NodeJS API。我尝试了下面的代码，它调用localhost:8080/stream一次并结束响应。我想让我的观察者连续监听web服务。
var headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
headers.append('
浏览 1提问于2017-08-30得票数 0
我使用的是角4+网络包，我在nonTreeShakableModules const中添加了一个webpack.config.vendor.js插件：
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableM
浏览 7提问于2017-10-30得票数 0
回答已采纳
我正在使用angular和nodejs作为后端，我想从后端服务器获得我的响应和状态代码。目前，我只能获取响应数据，但不知道如何获取状态代码。我需要它来检查请求是如何进入后端服务器的。
这是我的angular CityService代码。
import { HttpClient } from '@angular/common/http';
export class CityService {
constructor(private http: HttpClient) { }
API_URI = 'http://localhost:5000'
g
浏览 1提问于2021-05-18得票数 0
如何在Angular 2中强制组件重新渲染？为了调试的目的，使用Redux时，我想强制一个组件重新渲染它的视图，这是可能的吗？
浏览 125提问于2016-01-31得票数 204
回答已采纳
我刚接触Angular/MEAN。我正在学习一个教程，在那里我没有问题。但现在我正在制作自己的应用程序，它不能正确渲染--我不知道问题出在哪里。
所以我有一个模型+组件'ENTRY‘。我尝试在我的应用程序中显示2个测试条目(在AppComponent-constructor + put into a Array中创建)，但它们没有显示。
// entry.model.ts
import { Segment } from '../segment/segment.model';
import { Marker } from '../marker/marker.mod
浏览 0提问于2018-04-30得票数 1
3回答
我有一个发出http请求并返回响应的服务。我想在我的组件中使用该响应，并在屏幕上显示它的一部分，但它不起作用。我在控制台中没有得到任何错误，但屏幕上什么也没有显示。
这是我的服务：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class MenuService {
constructor(private http: HttpClient) {
}
menu: any;
浏览 1提问于2017-10-12得票数 1
回答已采纳
2回答
我正在尝试使用instagram api获取一些照片。不幸的是，处理 CORS问题似乎有点困难。所以我决定使用Jsonp.get来传递它。
这是我的服务：
import {Http,Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {Injectable} from '@angular/core';
import {Gallery} from '.
浏览 0提问于2016-08-09得票数 3
1回答
我有一个可注入的服务，HttpRequestService，当没有服务器时，我想用MockHttpRequestService替换它，因为我正在运行开发模式(npm )。这个MockHttpRequestService将返回非常简单的响应。
我以为我找到了一种动态替换HttpRequestService的方法，但不幸的是，我发现HttpRequestService仍然在被使用。以下是我尝试过的：
main.ts
import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide} from &
浏览 4提问于2016-06-14得票数 2
回答已采纳
因此，我使用Angular 6，并尝试从父路由导航到子路由。导航成功，但是在渲染子组件时会出现不需要的页面刷新。换句话说，导航可以工作，但它也会在没有明显原因的情况下刷新页面。下面是我的代码： const appRoutes: Routes = [
{
path: "parent/:param1/:param2", component: ParentComponent,
children: [
{ path: ":param3", component: ChildComponent }
浏览 55提问于2018-08-07得票数 3
回答已采纳
当切换路由时。如何保持应用程序的状态不变？我观察到，每次切换选项卡时，Angular类都会重新初始化。
例如。
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
@Component({
})
@View({
template: `
<input class="form-control" [value]="test"> </input>
<br>
{{test}}
`
})
export class SearchPag
浏览 0提问于2015-09-24得票数 12
回答已采纳
我是angular和typescript的新手。我有8个页面，包括登录和注册页面在我的角度项目。我需要在每个页面的用户配置文件数据，例如它的电子邮件id。我尝试通过emit函数向每个组件发送电子邮件，但它不可靠，因为每当我们刷新页面时，数据都会丢失。有没有人能建议我一个简单有效的方法来获得我的项目的每个页面/组件的电子邮件id。
下面是我的login.ts文件
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '
浏览 20提问于2021-05-15得票数 0
回答已采纳
2回答
使用angular2 (2.0.0-α.45)和TypeScript (1.6.2)
试图创建一个简单的服务注入到组件中。
我所犯的错误：
无法解析{ComponentName}(?)的所有参数。确保它们都有有效的类型或注释。
自举：
bootstrap(App, [ROUTER_PROVIDERS, HTTP_PROVIDERS]);
服务(我的服务)：
import {Injectable} from 'angular2/angular2';
@Injectable()
export class MyService {
public doSomething()
浏览 8提问于2015-11-09得票数 2
回答已采纳
2回答
我有一个恼人的错误，可能是因为我的错误我无法解决。我有一个简单的组件，实际上它只不过是我的web应用程序中的一个顶层元素。
如您所见，这个组件只有一个依赖项，即UserService，它使用它非常简单：
import { Component, OnInit } from '@angular/core';
import { MdButton } from '@angular2-material/button';
import { MdIcon , MdIconRegistry} from '@angular2-material/icon';
imp
浏览 2提问于2016-07-11得票数 4
我最近升级到了Angular2最终版本。我不认为这是重复的，因为在Angular2最终/Rc7更新之后不再为我工作。以前，刷新页面将使用散列(#)获取相关路由并重新加载页面。现在，我在任何刷新的页面上都会得到这个错误：
我认为这是因为它试图加载http://localhost:3000/main/home而不是http://localhost:3000/#/main/home。
知道为什么HashLocationStrategy停止工作了吗？我是否应该在我的HashLocationStrategy中导入@NgModule
浏览 5提问于2016-09-20得票数 1
回答已采纳
2回答
我参加了一个官方教程()。我发现，导出/@组件的顺序似乎有价值。所以，如果它是这样设置的：
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
styleUrls: ['styles.css'],
templateUrl: 'templates/home.html'
})
export class AppComponent {
title = 'The untitled, unknown, unburrie
浏览 0提问于2017-05-18得票数 1
1回答
“我有以下问题:我想从异步rest调用中获取json，并在Angular库(在我的例子中是angular-ui-tree和angular-charts)的一些现有指令中使用它。
这是一个简单的例子，用angular-ui-tree来解释我的问题。服务：
var mod = angular.module("user.services");
mod.factory("userService", ["$http", function ($http) {
return {
getUserMenu: function () {
浏览 0提问于2014-04-11得票数 0
我在尝试将我的可注入服务导入组件时遇到了问题。尽管我可能会尝试，但我无法让系统看到AuthenticationCallbackActivateGuard。
我使用的是修改后的版本。它在app.module中非常好地导入，但是一旦我尝试在我的登录组件上完成它，它就找不到它了。
app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angul
浏览 3提问于2017-01-18得票数 1
回答已采纳
5回答
我对角形6很陌生，以前也没有任何角度版本的经验&使用角锥6创建我的网站，在这个版本中，我必须显示旋转器，直到API响应被搁置，我正在使用httpclient的角6调用API。我想为每个API请求显示spinner。我搜索了一下，但是没有找到我的question.Below是我的组件和服务文件的答案。
/* data.services.ts */
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectab
浏览 1提问于2018-09-16得票数 10
回答已采纳
我想知道在angular中两个或更多的组件是如何相互通信的。因此，在创建了一个Angular项目之后，我刚刚创建了四个新组件，分别命名为一、二、三和四。
在那之后，我尝试在app.component.html中添加以下代码
<app-one>
<app-two>
<app-three> </app-three>
</app-two>
<app-four> </app-four>
</app-one>
所有组件都具有相同的类，如下所示：
import
浏览 0提问于2018-07-13得票数 0
错误截图：
存在错误的代码：
import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Heroes
浏览 1提问于2016-05-16得票数 0
回答已采纳
我对Angular2.1.2有一个问题。我无法获取http响应中的标头。
我在浏览器中有响应头：
但我无法在http响应中获取报头：
this.http.post(url, body)
.map(res => res)
.subscribe(
(res) => {
//do something
}, (err) => {
let authenticateErr = err.hea
浏览 4提问于2016-12-13得票数 0
2回答
我有以下单元测试文件，它是来自另一个类似组件的工作文件的副本，并且离样板角CLI输出不远：
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Http, HttpModule } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/
浏览 3提问于2017-07-06得票数 2
回答已采纳
我在我的项目中使用angular 2，当我使用ng build和ng serve时，我没有得到以下错误。只有在使用prod build ng build --prod时才会发生这种情况
ERROR in Error: Illegal state:
Could not load the summary for directive "component name"
在我的项目中使用了以下依赖项。
任何人请尝试帮助解决此问题：
Node :8.10.0
"dependencies": {
"@angular-devkit/core
浏览 11提问于2020-05-22得票数 3
嗨，我在一个iPhone应用程序上工作&在收到来自套接字的响应后，我必须在一个选择器视图上显示一些东西，pickerview的方法是在应用程序将要加载时进行检查。在我的应用程序中，我必须通过点击按钮来加载PickerView。
在获得数组中的响应后，当我单击按钮时，它显示一个选取器视图，但为空。:(所以谁能告诉我如何像tableView一样重新加载选择器视图。
提前感谢
浏览 3提问于2011-04-26得票数 3
回答已采纳
我在Angular4中工作，并试图在另一个函数中使用http请求响应(我有一个酒店列表组件，我可以选择任何酒店，然后将其重定向到另一个端点，在那里我可以修改酒店)。我的想法是创建一个类，其中我有一个变量，它可以存储响应。
export class Hotel {
data = {
type: 'hotels',
id: '',
attributes: {
location: '',
name: '',
main_image_src: '',
浏览 2提问于2017-06-28得票数 2
回答已采纳
我很新的角度，我有烦人的问题，我不明白。我想将我的服务注入@NgModule，这样我就可以在应用程序中的任何地方使用它，而无需再次声明或导入它。然后，当我运行我的项目时，刷新页面后一切都很好，并得到这个异常：
错误:秘密(承诺)：错误:没有服务提供者
make.service.ts
import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable
浏览 2提问于2017-06-09得票数 1
我正在使用升级适配器逐步升级我的应用程序。我的应用程序使用ui-router (+有子路由)。
我读到了这篇关于在Angular 2中路由的。我的问题是：
有没有可能在Angular 1.X app +升级适配器中使用新的路由器？
例如：
我有一个带有<div ui-view=""></div>的angular 1.X模板。当我将它升级到Angular 2.0组件时，我必须使用新的组件路由器，因为Angular 2.0现在正在渲染这个组件。但是，为了使用它，我应该这样做：
bootstrap(App, [provide(LocationStrategy,
浏览 2提问于2016-01-27得票数 17
我正在通过创建一个示例来学习Angular2，在该示例中，我希望在Component1上单击一个按钮，从而对服务进行ajax调用，并在另一个组件中使用和显示ajax的响应。
我能够创建Component1，并且能够通过在服务类中进行ajax调用来获得响应。现在如何在另一个组件中显示结果
这是我的第一个组件：
import { Component } from '@angular/core';
import { ProfileService } from '../shared/index';
@Component({
selector: '
浏览 0提问于2018-10-24得票数 1
我有一个从服务器检索数据的简单组件。
@Component({
selector: 'app',
template: `
<h1>HEllo {{category}}</h1>
`,
providers: [
HTTP_PROVIDERS,
CategoryService
]
})
export class App implements OnInit {
private category;
constructor(private _categoryService: CategoryService){}
浏览 2提问于2016-03-16得票数 0
在创建Angular 7应用程序时，我定义了一个用于不同实体的表单组件。 为此，我创建了一个变量路由： {path: ':entity/create', component: FormComponent} 这项工作很好，但根据我想要创建的实体，我必须加载不同的对象。 所以我尝试在Angular中使用变量类名来实例化一个类。 我试着去做： var object = eval('new myObject()'); 但是我得到了这个错误信息： ERROR Error: "Uncaught (in promise): ReferenceError: myO
浏览 11提问于2019-03-21得票数 3
var映射、包、var配置做什么。还解释映射和包对象的所有配置属性。是否有可用配置的文档？
这是我的系统控制文件
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
/
浏览 7提问于2017-03-21得票数 8
回答已采纳
1回答
强制Vue组件重新呈现
、、、、
所以这听起来可能有点奇怪，但我做了一个Vue应用程序，作为我们在angular中构建的主要应用程序的文档。
我正在使用Vue-router，它成功地允许我路由一堆不同的部分。我将<my-angular-component></my-angular-component>放在我的一个Vue模板中，在我的页面中包含Angular之后，angular组件实际上可以正确呈现。然而，它只有在我刷新浏览器并在第一个页面渲染的情况下才能正确渲染。一旦我使用router-view转到其他路由，然后返回到最初的路由，angular组件就不再被渲染。
谁有任何线索，我如何告诉页面上的角度，以
浏览 1提问于2016-12-23得票数 0
这是我的代码
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ fie
浏览 1提问于2015-09-16得票数 1
我正在尝试在我的Angular 2应用程序中使用。基本上，我有一个带有几个选项卡的仪表板。但是，当我渲染选项卡时，它就断了。以下是我的代码：
dashboard.html
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Dashboard</span>
</div>
<div clas
浏览 2提问于2016-02-11得票数 0
我正在尝试获得结果，并将其与观察值进行比较，但我无法获得结果，谁能帮帮我？
import { Injectable } from '@angular/core';
import {Component} from '@angular/core';
import {Http, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import { IStudent1 } from '../interfa
浏览 0提问于2016-08-20得票数 0
我正在尝试检测是否使用data.n选择了任何元素，但它给出的错误是属性n不存在于“Contact”类型上，因此如何使这个delete操作工作。我正在添加与上述问题相关的代码。
contact.service.ts.
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpClientModule} from '@angular/common/htt
浏览 5提问于2021-03-22得票数 0
3回答
我正在尝试解析从swapi得到的API响应，我希望能实现，但API响应只出现在控制台日志中。我也想从我制作的表格中得到响应。
swapi是一个公共API，您可以在中找到它。
这是我的代码。vehicle.html
<div class="card mb-3">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" ari
浏览 0提问于2019-08-30得票数 0
我有一个Header组件，它应该以用户是否被记录为条件来呈现他的子组件。它通过会话存储来识别状态。我试图控制componentDidMount的呈现
renderUserHeader = () => {
if (sessionStorage.getItem('user-auth')) {
var tokenToSend = { token: sessionStorage.getItem('user-auth') }
var regJSONED = JSON.stringify(tokenToSend)
fetch('h
浏览 5提问于2019-12-22得票数 1
回答已采纳
我想使用angular-ui-router重新加载一个页面，例如，当页面'/ page‘上发生某些操作时，使用地址’/task‘。该怎么做呢？
$state.reload()
不重新加载HTML和控制器。我也不想刷新页面。只需重新渲染控制器模板中的所有内容(以及所有子组件)。
问候
浏览 0提问于2017-09-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
