在angular 2中的页面之间移动数据
在Angular 2中，可以通过多种方式在页面之间传递数据。以下是一些常用的方法：
- 使用路由参数：可以在路由配置中定义参数，并在不同页面之间传递。在源页面中，可以使用
router.navigate方法导航到目标页面，并传递参数。在目标页面中，可以使用ActivatedRoute服务来获取传递的参数。 - 使用服务：可以创建一个共享的服务，用于在不同页面之间传递数据。通过在服务中定义属性或方法，可以在一个页面中设置数据，在另一个页面中获取数据。可以使用依赖注入将服务注入到需要使用数据的组件中。
- 使用本地存储：可以使用浏览器的本地存储（如localStorage或sessionStorage）来在页面之间传递数据。在源页面中，将数据存储在本地存储中。在目标页面中，从本地存储中获取数据。
- 使用输入和输出属性：可以在父组件中定义一个输入属性，并在子组件中使用该属性接收数据。在父组件中，可以通过属性绑定将数据传递给子组件。在子组件中，可以通过
@Input装饰器接收数据。 - 使用事件和订阅：可以在一个组件中触发一个事件，并在另一个组件中订阅该事件来接收数据。可以使用
EventEmitter类来定义和触发事件，并使用subscribe方法来订阅事件。 - 使用状态管理库：可以使用像NgRx或Akita这样的状态管理库来在不同页面之间共享和管理数据。这些库提供了一种集中式的状态管理机制，可以在整个应用程序中共享数据。
以上是一些在Angular 2中在页面之间移动数据的常用方法。根据具体的需求和场景，选择适合的方法来传递和管理数据。
相关·内容
1回答
组件中的Vue.js组件，操作父数据。
javascript、vue.js
我已经看到了新的答案，我的问题，但没有完全回答，所以让我解释一下我想做什么。
我们在我们的网站布局中使用了一个全球性的#app div，这是一个Laravel项目。因此，所有页面都将是相同的主Vue实例，因此我将关键功能分离为组件。
因此，第一个例子只是一个简单的Tab组件，这要么将任何子组件分离成制表符，要么接受一些数据，然后由单个子组件呈现。
因此，下面我从另一个组件注入一些数据，这个ajax组件实际上只是执行一个ajax调用，并使数据在它的槽内可用。
<ajax endpoint="/api/website/{{ $website->id }}/locations/{
浏览 1提问于2018-11-07得票数 0
回答已采纳
1回答
React:在本地和redux状态更新时附加组件动画
reactjs、react-hooks
我正在构建一个组件，在每个本地和redux状态更新时渲染动画。本地状态在单击按钮时更新，它还向远程服务器发出ajax请求，以更新用户单击该按钮的情况。我每次点击都会更新本地状态，如下所示： const [selfAnimations, setAnimations] = useState<AnimationRenders>(initialAnimationState);
const onButtonClickCallback = () => {
makeRemoteAjaxCall();
selfAnimations.localEventsCount +=
浏览 7提问于2019-08-27得票数 0
回答已采纳
3回答
“全局”参数-在MainLayout.razor、NavMenu.razor、Counter.razor之间来回传递
blazor、blazor-server-side
给定使用VisualStudio2019 Blazor服务器模板创建的“默认”Blazor应用程序-。如何创建可从所有剃须刀页面和组件访问的全局对象。
如何使“当前计数”值在MainLayout、NavMenu、索引页上可见并“动态”更新？
当前计数：@currentCount
用[Parameters]？
使用[CascadingParameter]
创建静态类？
在Blazor中推荐的方法是什么？
浏览 3提问于2020-04-21得票数 3
回答已采纳
2回答
大量使用本地存储是一种好的做法吗？
reactjs
我目前正在制作一个REACT web应用程序，我已经大量使用localStorage来跟踪数据，而不必进行更多的api调用，我将快速解释我正在做什么，并想知道这是不是一个好的做法，或者是否有更好的方法。 我正在开发一个博客应用程序，需要访问其他组件中的一些数据(例如当前连接的用户的用户名)。 因此，每次我进行api调用，并接收我知道在其他组件中将需要的数据(特别是如果它不是接收数据的组件的子组件)时，我将其存储在本地存储中，以便可以轻松地访问它。 为了方便起见，每次都使用本地存储是好的吗？ 关于何时查询数据而不是依赖localStorage，您有什么指导原则吗？ 谢谢你的回答。
浏览 42提问于2020-01-10得票数 1
回答已采纳
1回答
角质材料:当触发器位于另一个部件中时，如何切换侧面。
html、angular、typescript、angular-material、sidenav
如何将sidenav从另一个组件切换？
当按钮/触发器与sidenav位于同一个.html文件中时，它工作得很好，但是如果我生成一个新组件，在我的例子中，我将它们命名为“侧栏左”和"topbar“，它不起作用。
我所做的就是生成组件来分离它们。我把sidenav放在“侧边栏-左”组件中，按钮/触发器放在"topbar“组件中。
sidebar-left.component.html
<mat-sidenav-container>
<mat-sidenav #sidenav mode="side" [(opened)]="ope
浏览 4提问于2019-10-30得票数 2
回答已采纳
1回答
Angular2和服务可以与同一页面上的组件共享表单数据
angular、angular-services
我很抱歉，在精炼我的搜索字符串之后，我找到了一个具有类似请求和答案的问题：
我正在工作和练习，这要求我创建一个表单，其中第1列中有3个输入，第2列中有一个HTML表。
第2列的HTML使用外部JSON数组填充。但是，我试图完成的是将用户提交的数据附加到新行中当前表的末尾。
我在页面上有表单和表格组件，并且分别工作。
问题:在我的研究中，我遇到了在没有子父关系的组件之间共享数据的服务选项。这是实现这一目标的最佳方式吗？
下面是我的组件文件：
task-table.component.ts
import { Component, OnInit } from '@angular/core&#
浏览 2提问于2019-05-20得票数 0
2回答
如何在Vue中的组件间共享代码
javascript、validation、vue.js
我有这样代码的组件：
export default {
name: 'signup',
data () {
var myValidator = (rule, value, callback) => {
// cut some code, but here the access to component property
t = this.response
};
return {
signupDTO: {
email: '',
浏览 1提问于2018-06-15得票数 2
回答已采纳
2回答
如何在一个页面上使用状态和数据，并在另一个页面上使用
reactjs、state、multi-page-application
我想使用在组件1中搜索的数据(这是一个允许您搜索食谱的页面，然后它会给出一个带有名称、配料和说明的食谱)，并在页面2中使用它(将允许您查看食谱，然后在商店API中搜索配料)。
App.js
class App extends Component {
render() {
return(
<Router>
<div>
<Route exact path = '/' component = {Search}/>
<Route exact path = '/shopp
浏览 6提问于2019-08-09得票数 0
6回答
React:将映射的数据从单击按钮传递到显示在另一个组件上
javascript、reactjs、react-router、react-hooks
我在传递从API映射的数据时遇到了一些困难，它根据API数组中有多少事件显示了一堆事件卡。
这是我的事件卡组件；
export default function EventCard() {
const classes = useStyles();
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios("http://localhost:23455/Event");
浏览 9提问于2020-08-12得票数 5
回答已采纳
1回答
我希望从我的路由组件接收事件，并将数据从父组件传递到它们。
内容-应用程序-模板：
<router-outlet [data]='data' (selected)="selected($event)"></router-outlet> //this is not working
“content”组件应该接收来自路由组件的事件(例如“内容-app-列表”)
<content-app> // this is where the events should arrive
<content-app-header>
浏览 3提问于2016-12-16得票数 1
回答已采纳
1回答
如何在多页SwiftUI用户注册之间传递用户输入数据？
ios、swiftui
考虑到一个iOS SwiftUi应用程序，在用户注册过程中总共有3页。
第1页包含电子邮件输入，2页包含用户名输入，继续按钮第3页包含密码输入和注册按钮
捕获用户输入数据并将其发送到后端的最佳实践是什么？
我最初的假设是将用户输入的数据本地存储在第1页和第2页。然后点击第3页的寄存器按钮，获取先前本地存储的数据以及第3页的数据，并将其作为一个发送到后端。然后清理当地的储藏室。
其他想法是使用@EnvironmentObject来存储用户输入，但这是否安全/推荐呢？
浏览 1提问于2019-12-19得票数 2
回答已采纳
2回答
隐藏页面的一部分，直到使用vue加载子组件为止。
javascript、html、css、vue.js
我有一个使用Vue的SPA，默认的布局是头中的html，然后是一个抽象的子组件，它被注入到页面中。每个子程序都有一个加载程序，以便在加载页面时，用户看到标题html，并在子服务器从服务器获取数据并呈现数据时显示加载图标：
<navbar/>
<child id="main-content"/>
我现在需要为每一页添加一个页脚。但是，它看起来不太好，因为在父默认布局中添加页脚会导致显示页眉，然后显示加载图标，然后只有在从子服务器中从服务器获取数据之后才会按下页脚：
<navbar/>
<child id="main-content
浏览 15提问于2021-12-07得票数 0
回答已采纳
1回答
VueJS:推荐的缓存组件数据的方式
vue.js、vuejs2、vue-component、vuex
在我的VueJS应用程序中，我有多个页面(视图、组件)，它们从一些WebApi加载单独的数据。响应数据应该缓存在VueJS应用程序中，直到用户显式地点击“清除缓存”按钮。 在每个组件的" data“成员中存储响应数据不起作用，因为在使用vue-router在页面中导航时会重新创建组件。 我知道vuex用于存储应用程序状态，但它似乎更像是应用程序中央存储，而不是组件本地存储。我看到vuex存储可以模块化，但一个组件的状态仍然可以被不同的组件访问。 推荐的存储方式是什么(私有？)VueJS组件中的数据/状态，以便在页面导航中幸存下来？
浏览 13提问于2021-07-22得票数 0
2回答
React Native在同级视图之间传递数据
react-native、siblings、pass-data、navigator-ios
我正在使用React Native开发一个简单的待办事项列表应用程序，我的问题如下:我在项目的根目录下有一个NavigatorIOS，其中包含一个ListView作为初始路由的组件，以及一个指向任务创建视图的导航栏按钮。
创建新任务后，将弹出该视图，以便显示ListView。我正在尝试将新创建的任务添加到这个ListView中(它的数据源包含在组件状态中)。
我会在纯原生应用程序中使用委托，但在这里，两个视图都是由NavigatorIOS实例处理的。
index.ios.js
addTask() {
console.log("Test");
},
render() {
浏览 16提问于2015-04-14得票数 16
2回答
Vue:如何在同级组件上触发事件
vue.js、vue-component
在Vuejs中，我有一个父组件(P)和两个子组件(C1和C2)。父对象与两个子组件共享对象。
组件C1显示对象(在表中)，组件C2允许用户修改共享对象的属性。因为这些对象是作为对象共享的，所以我将在C2中直接更新它们的属性，并且更改将显示在C1中。
问题是C1负责保存更改(通过对服务器进行ajax调用)。如果用户在C1中直接修改属性，则会触发更改事件，并由事件处理程序进行调用。但是，如果属性是在C2中更新的，则更改事件不会在C1中触发，因此更改不会持久。
因此，问题是，如何根据C1中的事件触发C2中的更改事件？我已经设置了一个事件总线(在根元素中)。我可以(也许)使用事件侦听器来获取元素(例如
浏览 1提问于2018-05-20得票数 4
回答已采纳
2回答
Reactjs如何从其他组件更改组件的状态
javascript、ruby-on-rails-4、backbone.js、reactjs
我有一个反应性组件，让我们称之为组件1。
define([..., /path/component_2.jsx], function(..., Component2) {
var Component1 = React.createClass({
getInitialState: function() {
return {.......};
},
componentDidMount: function() {
.......
dates = ....;
Component2.
浏览 5提问于2015-11-19得票数 11
回答已采纳
48回答
状态和道具在反应上有什么区别？
javascript、reactjs
我在看“反应”课程，老师说道具不应该换。我现在正在读道具和状态的，上面写着
道具和状态更改都会触发呈现更新。
这篇文章的后面写道：
道具(属性的缩写)是一个组件的配置，如果可以的话，它的选项。它们是从上面接收的，是不变的。
所以道具可以改变，但它们应该是不变的？
什么时候应该使用道具，什么时候应该使用状态？
如果您有React需要的数据，是通过支持还是通过getInitialState在React组件中设置？
浏览 0提问于2015-01-16得票数 739
回答已采纳
1回答
在React / Redux中，我们可以通过Redux将数据从任何组件传递到另一个组件吗？
reactjs、redux
由于Redux只是整个应用程序中唯一的(也是主要的)数据存储区，我们可以从
从父componentchild到兄弟组件的子组件、或任何其他组件的任何组件
仅仅通过发出一个带有数据的操作来生成一个新的应用程序状态，从而能够传递数据？
浏览 5提问于2020-02-11得票数 0
2回答
如何显示立即添加的数据？
angular
我正在本地添加数据。当我添加时，添加的数据量应该会显示在徽章组件中。但只有在切换到另一个页面后才会发生这种情况。我需要的数据要显示后立即添加。 该怎么做呢？ quantity = 0;
ngOnInit() {
setTimeout( () => {
for (var i = 0; i < this.order.list.length; i++) {
this.quantity += this.order.list[i].quantity
}
}, 1000)
}
浏览 30提问于2020-09-25得票数 0
3回答
如何在react js中的不相关组件之间共享数据？
reactjs、react-hooks、react-component、use-context、data-sharing
我是reactjs的新手，我正在努力解决以下问题:我有一个包含AudioPlayer的Header组件(在我的App.js文件中)。这个AudioPlayer需要用src的当前值(带有歌曲的路径，存储在本地)和标题来更新。现在，想一想这样的事情：
App.js
function App(){
<Header/>
<Page1/>
<Page2/>
<Page3/>
...
<SomePage/>
...
<Footer/>
}
Header.js
import
浏览 6提问于2021-03-27得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
