TOGOUTECH

javascript - 我如何像 React 一样在 Angular 2+ 中传递 Prop ？

coder 2024-05-16 原文

在 React 中，我可以像这样任意传递 props:

function SomeComponent(props) {
  const {takeOutProp, ...restOfProps} = props;
  return <div {...restOfProps}/>;
}

如何在 Angular 中做同样的事情？

--

更具体地说，我想编写一个自定义下拉组件并将 Prop 向下传递到一个选择框。

最佳答案

与 React 组件相反，Angular 组件不会在输入更改时重新编译，而是使用 @Input 属性装饰器来启用更改检测。所有预期传递的属性都应明确定义为组件输入。

对于自定义选择组件，没有比这更好的选择了。可以从当前组件元素读取静态属性并将它们设置在嵌套组件元素上，但这不会设置绑定(bind)。

关于包装组件中深层 props 的 React 配方:

const Baz = props => <p>{props.baz}</p>;
const Bar = props => <Baz {...props} />;
const Foo = props => <Bar {...props} />;

这通常由 Angular DI 和注入(inject)器层次结构处理。可以在相应的注入(inject)器上定义提供者，以便使数据和行为可用于嵌套组件。

关于javascript - 我如何像 React 一样在 Angular 2+ 中传递 Prop ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47297089/

javascript传递propssection自定angularreactjstypescript

有关javascript - 我如何像 React 一样在 Angular 2+ 中传递 Prop ？的更多相关文章

  1. javascript - 如何使用 Node js 和 babel 保留正确的行号 - 2

    我有以下设置并且我的错误/堆栈跟踪有问题我是否遗漏了什么？package.json看起来像:{"name":"xxxxxx","main":"server.js","private":true,"scripts":{"start":"nodemon--exec./node_modules/.bin/babel-nodeserver.js"},"dependencies":{"babel":"^6.5.2","babel-cli":"^6.6.5","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","babel-pr

  2. javascript - 已知的 JavaScript 指令 - 2

    ECMAScript规范定义了UseStrictDirective，但允许实现定义自己的指令。来自here:ImplementationsmaydefineimplementationspecificmeaningsforExpressionStatementproductionswhicharenotaUseStrictDirectiveandwhichoccurinaDirectivePrologue.什么是已知的特定于实现的指令？在Google上快速搜索一下，除了usestrict什么也没有。我能想到useasm和usestrong.还有其他的在用吗？

  3. javascript - 谷歌浏览器导航器在线始终为真 - 2

    基于mozilla开发者网络https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine它说Returnstheonlinestatusofthebrowser.Thepropertyreturnsabooleanvalue,withtruemeaningonlineandfalsemeaningoffline.Thepropertysendsupdateswheneverthebrowser'sabilitytoconnecttothenetworkchanges.Theupdateoccurswhen

  4. javascript - 如何使用 nodemailer 和电子邮件模板发送消息？ - 2

    我尝试使用nodemailer和电子邮件模板发送电子邮件。现在我从这里exampleemailtemplates得到了例子。但是当我检查这段代码时，出现错误apromisewasrejectedwithanon-error:[objectUndefined]请帮帮我。这是我的代码varnodemailer=require('nodemailer');varEmailTemplate=require('email-templates').EmailTemplate;exports.sendOne=function(){vartemplatesDir=config.templatesDir

  5. javascript - 在注册表单上，表单字段未保存在提交时自动填写的浏览器中。(ReactJs) - 2

    我的站点中有一个注册表单，我正在其中保存字段，并且在用户再次返回该注册表单时保存表单后，我希望将以前的字段值保存在浏览器自动填充中。下面是我的代码片段-SignUp在anchor标记的onClick代码中，我通过注册用户函数进行ajax调用。之后，我希望用户数据自动填充到chrome中的浏览器自动填充地址中。我尝试了以下方法:-1.很少有人建议使用表单“提交”按钮功能将数据保存在自动填充中，而不是使用ajax调用表单anchor标记的onClick事件。但这对我来说也不起作用。2.我看过一些帖子，其中他们告诉我要为字段使用专有名称和自动完成属性。但使用该浏览器只能猜测正确的字段值。

  6. javascript - CORS 预检错误 redux & loopback API - 2

    我在react-redux上有一个客户端应用程序，在loopback上有一个API应用程序。对于本地测试，我在端口8080上运行客户端应用程序，在端口3000上运行服务器应用程序。当我尝试使用客户端应用测试GoogleOAuth(使用loopback-passport组件)时，出现以下错误。当我使用POSTMAN对其进行测试时，没有任何问题。这是客户端代码，require('babel-polyfill');import{CALL_API}from'redux-api-middleware';importCfrom'../constants';constAPI_ROOT='http:/

  7. javascript - 在 Webpack 和 React.js 中设置代码拆分 - 2

    我正在尝试在我的应用程序中设置代码拆分/分块-通过路由，使用require.ensure。所以这是我的路线:{require.ensure([],(require)=>{cb(null,require('attendee/containers/Profile/').default)},'attendee')}}/>以下是我的webpack配置中的相关行:constPATHS={app:path.join(__dirname,'../src'),build:path.join(__dirname,'../dist'),};constcommon={entry:[PATHS.app,],o

  8. javascript - 如何忽略 node.js 中另一个文件或组件所需的文件 - 2

    以下可以忽略或对导入的文件进行一些修改，例如在我的index.js中require.extensions['.js']=function(file){console.log(file.id)return;};但是我真的不想忽略index.js中的这些文件我想忽略在后续文件/组件中导入的文件require.extensions['.js']=function(file){console.log(file.id)return;};require('babel-register')require('./components/Test.spec.js');例如，这会记录以下内容并返回/User

  9. javascript - 将对象数组转换为与 nodejs/pg/unnest 兼容的数组 - 2

    关于UPDATEmultiplerowsfrommultipleparamsinnodejs/pg，我需要运行以下命令:updateportfoliospsetvotes=s.votesfromunnest(array[(5,1),(15,1),(25,2)])s(votesint,idint)wherep.id=s.id其中unnest中我的数组是$1，如下:updateportfoliospsetvotes=s.votesfromunnest($1)s(votesint,idint)wherep.id=s.id但是，我的数组最初由对象组成，如:[{votes:5,id:1},{vo

  10. javascript - 使用 AJAX 的 Bootstrap 工具提示(再来一次) - 2

    平凡、常见的用例我想要一个工具提示，它在鼠标悬停时立即显示正在加载的GIF，该GIF被AJAX成功回调产生的HTML所取代。AJAX工具提示的错误答案几乎与在线问这个确切问题的人一样多。特别是，我一直在模拟我在this上的努力。,this，尤其是几个答案here.对于所有这些解决方案(即使是那些专门声称可以解决该问题的解决方案)，我一直遇到的问题是，工具提示偶尔会延迟出现并且无法消失。这也不是库问题，因为我过去在使用jQuery-UI工具提示时遇到过同样的问题。图书馆jQueryv2.2.3Bootstrapv3.3.6之前尝试过使用jQuery1并遇到了同样的问题:jQueryv1.

随机推荐