如何在Angular中将任何字符串变量的值从一个组件获取到另一个组件
在Angular中，可以通过使用输入属性（Input）和输出属性（Output）来实现从一个组件向另一个组件传递任何字符串变量的值。
- 首先，在接收值的目标组件中，定义一个输入属性。在组件的类中，使用@Input装饰器来创建一个输入属性，并指定属性的名称和类型。例如：
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-target-component',
template: '<p>{{ receivedValue }}</p>'
})
export class TargetComponent {
@Input() receivedValue: string;
}- 在发送值的源组件中，将要传递的字符串变量绑定到目标组件的输入属性上。在源组件的模板中，使用目标组件的选择器，并使用属性绑定语法将字符串变量绑定到目标组件的输入属性上。例如：
<app-target-component [receivedValue]="myStringVariable"></app-target-component>- 确保源组件中的字符串变量（myStringVariable）具有一个值。可以在源组件的类中初始化该变量，或者通过其他逻辑来赋值。
这样，源组件中的字符串变量的值就会传递到目标组件中的输入属性（receivedValue），并在目标组件的模板中显示出来。
请注意，以上示例中的组件选择器（app-target-component）和字符串变量（myStringVariable）仅为示意，实际应根据项目中的组件命名和变量命名进行调整。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/product/mu
相关·内容
在我为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
我有一个_color.scss文件。我有一个存储图像位置的$primaryImageURL。是否可以从Angular Service更新此变量。我从angular服务的get调用中获取位置详细信息。从另一个服务上传图像，并尝试动态更新主映像的位置。 // _color.scss
$primaryImageURL = 'src/assets/img/primaryImage.png';
//Service
someService.getPrimaryColor().subscribe(data => {
const brandingImg = data.brandI
浏览 7提问于2020-01-21得票数 0
回答已采纳
我是angular 4的新手。我发现在angular中有一种方法可以使用@Input将数据从父组件传递到子组件，如下所示：
<child [dataToPass]="test"></child>
我的问题是如何使用路由器做同样的事情。在路由器中，没有像输入这样的子定义；它只有<router-outlet></router-outlet>，那么如何使用@Input传递数据呢？
浏览 0提问于2017-09-28得票数 2
我正在使用带离子框架的angular。为了从一个组件导航到另一个组件，我使用了ionic nav控制器。我想要的就是加载哪个组件，它在公共位置或应用程序组件中给出该组件的名称
浏览 1提问于2019-05-28得票数 0
我在angular项目的index.html中的脚本中有一个对象。我需要从其他.ts文件访问该对象。 <script>
var jsonData ={
"company": 10,
"wareHouse": 'GLV',
"MMVNMS": 'CA',
"OFFSITE": 'OFFSITE',
"mualun": 'CAE',
}
</script> 我想从一个.t
浏览 34提问于2019-04-18得票数 1
回答已采纳
我想通过获取联系人详细信息，我不知道如何在angular5中使用它。我进行了彻底的搜索，得到了下面的js代码。如何在angular5中使用它。
connect.core.initCCP(containerDiv, {
ccpUrl: ccpUrl, /*REQUIRED*/
loginPopup: true, /*optional, default TRUE*/
softphone: { /*optional*/
disableRingtone: true,
浏览 0提问于2018-02-07得票数 0
回答已采纳
我需要从一个Angular项目更新来自外部javascript文件的变量 首先，我将变量导入到我的Angular组件中，然后尝试更新它，但我不知道该怎么做 我的Angular组件的一个小示例： import { Component } from '@angular/core';
import { externalText } from './external.js';
...
export class AppComponent {
myText = externalText;
changeText() {
// This works
浏览 13提问于2019-09-10得票数 0
将数据从一个类传递到驻留在同一级别的另一个类，而无需在react本机中导航。
浏览 20提问于2020-09-30得票数 0
回答已采纳
我用react和redux写了这段代码。
class BooksContainer extends Component {
componentDidMount = () => {
const category = this.props.category;
this.props.searchBook(category);
this.props.fetchBook();
}
handleClickPrevious = () => {
console.log('clicked on prev
浏览 9提问于2019-11-11得票数 0
我是SSIS的新手，我想知道如何从一个文件夹中读取多个XLSX格式的文件，并将它们输入一个foreach循环，以便它们可以插入到数据库中。
我正在回顾这些例子：
但是我想了解关于foreach循环的更多细节，或者是否有其他方法将数据文件上传到数据库。
欢迎任何建议。
浏览 3提问于2012-12-26得票数 2
我被困在从一个模块向另一个模块发送一些小块数据。我不会将这块数据存储在查询参数中，也不会存储在某些浏览器级别的存储或缓存中。我有什么选择，或者angular有什么机制可以在不重新加载我的应用程序的情况下做到这一点。
浏览 0提问于2018-12-19得票数 1
1回答
我只是从一个子组件中输出一些东西，然后我想知道如何将一个元素从父模板传递给父组件。
通常，我会为元素创建一个变量(在本例中为#textArea)，但不知怎么的，我无法传递它。有人知道怎么做到的吗？
父模板: editReview($event，textArea)是从子组件发送的函数。我在我的$event函数中接收到editReview部件，而不是元素引用.
<app-review-list [movie]="movie" (editReview)="editReview($event, textArea)"></app-review-list&
浏览 0提问于2018-02-28得票数 0
我使用的是Angular 7，我想将angular应用程序作为一个小部件插入到另一个外部html文件中。
我知道有angular元素可以创建自定义元素并插入它，但其中有许多浏览器兼容性问题。我尝试在外部html中包含<app-root></app-root>并添加脚本，它在所有浏览器中都工作得很好。但是我无法将输入传递给根元素。
这是将我的angular应用程序包含在外部文件中的正确方式吗？以及如何将输入传递到根组件。
浏览 2提问于2020-05-09得票数 0
在我的角度应用程序中，我试图将数组playlist从一个组件(1)传递给另一个组件(2)。最好的方法是什么。@输入？
Component1.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../services/api.service';
import { FormGroup, FormControl } from '@angular/forms';
import { FormBuilder } from '@a
浏览 1提问于2019-11-22得票数 0
我是Angular的新手。我正在游戏控制组件中创建一个按钮，并使用事件绑定和属性绑定。当我点击按钮时，按钮数将通过setInterval方法连续输入到一个数组中。我正在将数据从一个组件传递到另一个组件。游戏控制组件的选择器在app组件内部调用。这个按钮在click事件中工作得很好，但是当我使用ngFor来迭代数组并显示时，这些按钮也没有出现在dom中。提前感谢
<code>A0</code>
浏览 33提问于2018-12-22得票数 1
我正在尝试将数据从一个角度组件发送到另一个角度组件。 我已经设法通过sessionStorage做到了这一点，但我知道这不是最好的做法，因为它应该只包含与用户身份识别、日志记录等相关的数据。 在我看过的几个教程中，我必须通过EventEmitter通过html传递数据。在所有这些技术Sharing Data between Angular Components - Four Methods中都可以看到 但是，理想情况下，我想要做的是通过ts组件将数据从parent component传递到child component，以便能够直接在那里操作数据，然后决定如何在parent html中处理数
浏览 7提问于2020-09-16得票数 1
回答已采纳
1回答
我有这个组件(和另一个有相同问题的组件)。当字段值更改时，视图没有更新，我甚至试图强制进行更改检测，但它没有工作。
Angular-cli 1.0.0-beta.10
Angular 2.0.0-rc.4
Component.js
import {Component, OnInit, OnDestroy, ChangeDetectorRef} from '@angular/core';
import {Control} from '@angular/common';
import {WebsocketService} from './websocket.
浏览 0提问于2016-08-05得票数 0
回答已采纳
我知道在子组件和父组件之间传输数据的方法。
现在，我想将数据从一个组件传输到另一个组件。这两个组件都是sibling.They，具有相同的父组件。
我是angular2的新手。帮助。
浏览 5提问于2017-03-06得票数 1
回答已采纳
我试图使用路由器链接从一个页面重定向到另一个页面，并且我尝试了以下代码，
我的网址有以下路线
http://localhost:3000/#/app/dashboard
我想重定向到这个，当我点击这个
[routerLink]=" ['tables/basic'] "
http://localhost:3000/#/app/tables/basic
但它会
http://localhost:3000/#/app/dashboard/tables/basic
在这里，仪表板应该被移除，我怎么做呢？有谁能提供帮助吗？
我的routes.ts
import {
浏览 3提问于2016-11-07得票数 1
回答已采纳
是否有可能将所有数据从一个上传器(文件输入标记)传递到另一个上传器？在javascript或jquery中。
我想要做的是在一个上传程序中加载一个文件，并将其传递给另一个上传程序
浏览 0提问于2012-05-25得票数 0
我使用的是angular 5，cli版本是1.5.2，我面临着路由问题。
当从一条路线导航到另一条路线，然后向下滚动一点并导航回上一条路线时，页面将保持在相同的滚动位置。当前，从一个视图导航到另一个视图，然后向下滚动一点，然后导航回上一个视图。页面保持在相同的滚动位置。
但我需要页面滚动到顶部时，从一个路线导航到另一个。
另外，我需要知道这是否是angular中的默认路由行为？
浏览 1提问于2018-01-03得票数 2
实际上，我想知道Angular 5应用程序是如何加载的，以及它从服务器请求数据的次数，特别是当我们从一个模块中的一个组件移动到另一个组件时。
浏览 9提问于2019-01-30得票数 0
朋友们，你好，这是我在这里的第一个问题。
我在一个angular项目中遇到了这种情况，我需要将id数组从一个组件传递到另一个非常不同的组件，这两者之间没有关系，我这么说是因为我发现的所有问题都说要使用viewchild，input，output，但我认为我不能这样做，因为当我单击从数组中第一个组件获取id的按钮时，应该使用angular路由器导航到另一个组件，所以有办法这样做吗？
顺便说一下:一个朋友告诉我使用url params，但我必须是id的"x“个数，所以我不知道这是不是正确的答案。
对不起，我的英语，我希望说清楚
浏览 4提问于2019-12-04得票数 0
我试图使用ngModel绑定一个属性，但是它一次又一次地产生错误。我在组件中定义了convert方法，它需要一个parameter。我不明白为何会出现问题。html文件代码
<input type="text" [(ngModel)]="my_message" />
<button (onclick)="convert({'message':my_message})">Submit</button>
组件类代码
import { Component, OnInit } from '@an
浏览 1提问于2020-06-10得票数 0
回答已采纳
我找不到如何在Angular中将复杂对象从一个组件传递到另一个组件。
我在我的应用程序的不同模块中有两个组件，我想从一个组件导航到另一个组件，并将一个复杂的对象传递给第二个组件。
组件一：
buttonSubmit() {
this._router.navigate(['/app/sales/history', { product: this.product}]);
}
所以在第二个组件中，我想使用product对象：
this._route.params.subscribe(v => console.log(v));
我试过使用ActivatedRoute，
浏览 6提问于2017-08-22得票数 0
回答已采纳
1回答
如何将服务中的值从一个方向传递到另一个方向？我正在使用Elasticsearch和AngularJS构建一个小型搜索应用程序。它有2页，主页和结果。在家里，只有功能是自动完成的(使用AngularJS UI引导提前输入)，在结果页面上，显示结果和搜索框。我正在尝试使用自定义指令来完成此操作。
我基本上有所有的工作，除了，当在主页上，按下搜索按钮只是进入结果页，没有搜索处理是做的。一切都可以在结果页面自动完成搜索功能..。
最近，我将ng模型(SearchTerms)放入自己的服务中，但我将该服务注入到我的两个控制器中。我唯一能想到的就是我的模型没有被传递给指令？我被困住了..。还在学习Angu
浏览 3提问于2016-03-08得票数 0
我使用react-router-dom v4.3.1进行客户端路由。我是个反应新手，不知道如何在不使用url参数的情况下将数据从一个视图传递到另一个视图。在Angular中，Angular路由器具有数据特性，您可以在其中传递与路由关联的数据。下面是一个例子： const appRoutes: Routes = [ { path: 'hero/:id', component: HeroDetailComponent, data: { title: 'Hero Detail' } }, ]; 你能在react-router-dom中
浏览 22提问于2019-03-07得票数 0
回答已采纳
1回答
我试图将ngModel数据从一个组件传递到另一个组件，其中第二个组件可以使用该数据在其html中执行函数。
我使用的是@ but ()，但我不知道如何通过超链接发送数据。
home.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { BasePageComponent } from 'src/app/partials/base-page/base-page.component';
import { ActivatedRoute } from '@a
浏览 2提问于2019-04-11得票数 0
不确定为什么组件不能分配给@component的声明性属性。父语句中的此语句(指令: ChildComponent)引发编译错误。我的代码的目的是将一个数据值从父传递给子。我听说RC6声明不起作用，所以我在ngModule声明中声明了子组件，编译错误被解决了，但无法在子视图中获取数据。
Parent component:
import { Component } from '@angular/core';
import {ChildComponent} from './child-input.component'
@Component({
selector
浏览 1提问于2017-11-24得票数 1
我希望将我的对象从一个组件传递到另一个服务类。我知道在angular系列中有一些可能的方法，但你可以给我一个实现这个目标的好方法，非常感谢你的好建议和代码。
浏览 0提问于2018-06-29得票数 1
在Angular 1和ui-router中，我经常使用state params将数据从一个状态传递到另一个状态(不使用URL参数)。在Angular 2中有可能吗？
Router、RouteParams、RouterLink和RouteData似乎不能处理此问题，例如，我想将用户对象从一种状态传递到另一种状态
<a ui-sref="home({user: myCtrl.user})">
这在Angular 2中似乎是不可能的。
浏览 1提问于2015-12-25得票数 6
1回答
我需要动态地更改http请求名。我正在从一个请求中提取一个数字，我必须将其发送到下一个请求名称。对怎么做有什么想法吗？欢迎!！
浏览 0提问于2019-02-15得票数 0
回答已采纳
我们有3个基本的导航，显示隐藏选项卡视图tab1，tab2，tab3。除此之外，还有来自sidenav的导航。 每个选项卡动态加载组件，因此我们从一个组件导航到另一个组件。 其次，当从一个组件到另一个组件的导航结束，用户单击Done按钮时，当组件导航开始时，它应该定位在DOM中最初打开的tab1/tab2/tab3 (即导航结束并定位到tab1/tab2/tab3视图)。 当我们向后导航时，我们不能加载以前的组件，因为每个组件都由不同的组件使用，并且可能是不同导航流的一部分。 这里，不涉及路由，只涉及将组件加载到视图中。 考虑到给定的场景，有没有角度的方法来实现这一点？ 下面是stackbl
浏览 35提问于2019-05-12得票数 2
我正在使用Angular2。在我的项目中我用了
<table border="1" cellspacing="10" cellpadding="10" width="500">
<tr><th>NAME</th>
<th>Value</th>
</tr>
<tr *ngFor = "let d of Data">
<td><a href="
浏览 1提问于2017-10-25得票数 0
回答已采纳
1回答
如何用角覆盖布线出口？
、、、
我想在角8应用程序中为页眉、页脚、左侧和主要内容制作通用布局。
我不想重新加载页眉，页脚和左侧时，每次用户导航从一个页面到另一个页面，除了一些页面，如登录，联系我们。
我的一些基本代码如下所示
app.componant.html
<div>
<router-outlet name="header"></router-outlet>
<div>
<router-outlet name="leftMenu"></router-outlet>
浏览 2提问于2020-01-29得票数 0
3回答
我试图使用服务将数据从一个组件共享到另一个组件，比如body组件到header组件，但不起作用。单击“更改标题详细信息”按钮后，我希望更改标题数据详细信息，如id和name。
body.component.ts：
change(){
this.details = {
id:"45673",
name:"Micheal"
}
this.data.changeMessage(this.details);
}
common.service.ts：
import { Injectable } from '@angula
浏览 8提问于2020-03-09得票数 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
回答已采纳
如何在angular应用程序4、5或6中将数据从一个组件传递到另一个组件或调用函数。假设我有两个或更多组件的父组件。
浏览 1提问于2018-06-21得票数 0
2回答
如何在angular 2/4/6中调用一个组件的方法到另一个组件。我使用了两个组件，一个是登录组件，另一个是注册组件。在登录组件中，我有一个方法
login()
{
var email = email;
console.log("username", email);
var password = password;
this.loginService.loginrequest(email, password).subscribe(
data => {console.log(data)});
}
那么如何在
浏览 0提问于2018-07-16得票数 0
我必须从另一个功能组件调用一个功能组件，那么我如何在react js中从一个功能组件调用子功能组件。
import React from "react";
import TestFunctional from "./TestFucntional";
const TestListing = props => {
const { classes, theme } = props;
const handleClickTestOpen = () => {
return <TestFunctional />;
};
r
浏览 1提问于2019-07-17得票数 0
有件奇怪的事情发生在角落里。我从一个使用FormGroup工作良好的组件开始，但现在我添加了另一个组件，它也以完全相同的方式使用FormGroup (字面意思是复制粘贴它)，它给了我一个错误:不能绑定到'formGroup‘，因为它不是第二个组件的一个已知的“form”属性。
对于第一个组件，这就是我所做的。
在我导入的app.module.ts文件中
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
并将其添加到：
imports: [
ReactiveFormsModule,
浏览 1提问于2022-01-21得票数 -2
回答已采纳
<page [pagetitle]="pagePath">
<content>
<section title="Landlords" [isExpanded]="sectionExpansionStatus[0].isExpanded" (onSectionExpandChange)="onSectionExpandChange($event)">
<landlord-list [categorytype]=1 *ngIf="sectionEx
浏览 1提问于2016-12-06得票数 0
2回答
我必须使用Abc变量从a.tsx到另一个b.tsx文件。如何访问另一个.tsx文件中Abc变量？
当前a.tsx：
export const ProfilePicEditor = (props: ProfilePicEditorProps) => {
const [Abc, setAbc] = useState(
'some string'
)
我尝试在我的a.tsx文件中执行‘导出{Abc}’，并将其作为'Import {Abc} from‘.tsx’导入到b.tsx文件中。但这并没有成功。有什么可能的原因吗？
浏览 34提问于2019-08-06得票数 0
回答已采纳
嗨，我真的是Angular2的新手(我知道angular2提供的大多数概念)，在选择了一些选项后，我在获取特定数据时遇到了问题。
目前，我有假的数据库，并在数据库中创建了一些随机的人的个人资料。
我有带下拉选项的组件。我希望用户选择其中一个选项，一旦他们完成选择，我希望他们点击“完成”按钮。
一旦他们这样做了，他们将被重定向到另一个组件，该组件显示与他们的选择相对应的数据。
我猜我需要将用户选择的数据存储到服务中，并且这两个组件(一个带有选项的组件，另一个带有基于用户选择的信息列表)之间的通信应该利用该服务。
但我不知道该怎么做。我们将非常感谢您的帮助！谢谢!
浏览 6提问于2017-03-02得票数 0
回答已采纳
2回答
我正在学习MVP结构，并试图找出：
如何在模型之间传递数据？
每个模型代表一个动作，如果我需要将数据从一个模型发送到另一个模型，我如何才能正确地完成它？我应该通过演示者传递数据吗，比如
firstModel -> commonPresenter -> secondModel
或
在模型之间发送数据，如
firstModel -> secondModel?
如果这些模型与不同的主持人交互呢？
浏览 6提问于2017-01-14得票数 0
1回答
字符串数组作为变量
、、、
我在SSIS中使用了一个web服务任务，它运行良好。其中一个参数是string[]数组。我可以在编辑器中键入值，它可以正常工作，但是我希望从一个变量加载它。但我不知道如何创建/设置字符串数组变量。我创建了一个字符串变量，并将其设置为{ 'Test‘}或’Test‘之类的东西，但它们没有工作。
最终，我要做的是让它成为一个表达式，其中一些字符串是其他变量。ArrayList = @SystemVariable::PackageName，@SystemVariable：：TaskName.
浏览 0提问于2012-02-17得票数 2
我正在为一个应用程序使用FirebaseUI，我想设置一个全局变量，这个变量保存的是新用户。
我已经在app.module.ts中设置了firebaseAuthConfig，就像文档中的一样，一切都很正常。我可以创建帐户，登录，...
我还可以查看该用户是否是新用户。
我的问题是我不能转发这些数据。在应用程序的某些部分，我希望能够显示不同的数据，如果用户是新的。
我试图在提供程序中发送isNewUser值，但是我得到了一个错误，说对象是未定义的。
import { NgModule } from '@angular/core';
import { BrowserModule }
浏览 0提问于2021-03-07得票数 0
无法使用SharedService将数据从一个组件传递到另一个组件
我创造了共享服务，
@Injectable()
export class SharedService{
myData;
constructor(){
this.myData= {};
}
setMyData(val: object){
this.myData= val;
}
getMyData(){
return this.myData;
}
}
我想把数据'DialogOverviewExample‘组件传递给'D
浏览 0提问于2018-04-12得票数 1
回答已采纳
如何在angular 4中使用一个组件的对象在另一个组件中-->我的应用程序中有两个组件，比如component1和component2 .i需要在组件2中使用component1的对象。谁能帮我解决这个问题
浏览 1提问于2017-12-19得票数 0
2回答
angular2中的全局对象
、、、、
如何在angular2中创建全局对象。我正在使用navParams in ionic2从一个页面到另一个页面逐页收集数据(可能是4-5页)。但是想要将它存储在全局对象中&最后提交它。我尝试过使用全球提供商，但没有得到大部分&也没有得到任何线索。请有任何建议。
浏览 4提问于2017-07-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
