首页 \ 问答 \ 订阅activatedRoute,params具有不同的属性来保存传递的参数值(subscribing to activatedRoute, params has different attributes to hold the param value passed)

订阅activatedRoute,params具有不同的属性来保存传递的参数值(subscribing to activatedRoute, params has different attributes to hold the param value passed)

参数在targetComponent中订阅:

import Router from @angular/Router

  export class TargetComponent {
     constructor(private activeRoute: ActivatedRoute) {
       this.activeRoute.params.subscribe(params => {

       console.log(params)   // receives targetName but with different attributes
       console.log(params.name);   // sometimes params has attribute name 
       console.log(params.target); // and sometimes target 

  });

  }
}

从firstComponent发送参数

import ActivatedRoute from @angular/Router

this.router.navigate(['/', 'search' , targetName]);

发送参数形成第二部分

this.router.navigate(['/', 'table', targetName]);

路由配置

const routes: Routes = [
  {
    path: '',
    redirectTo: 'welcome',
    pathMatch: 'full'
  },
  {
    path: 'search/:name',
    component: SearchItemComponent
  },
  {
    path: 'table/:target',
    component: TableDataComponent
  }
 ]

尝试了解为什么params对象在从不同组件导航时存储“值”属性并有时需要“名称”来存储值。


Params subscribe in targetComponent:

import Router from @angular/Router

  export class TargetComponent {
     constructor(private activeRoute: ActivatedRoute) {
       this.activeRoute.params.subscribe(params => {

       console.log(params)   // receives targetName but with different attributes
       console.log(params.name);   // sometimes params has attribute name 
       console.log(params.target); // and sometimes target 

  });

  }
}

Sending params from firstComponent

import ActivatedRoute from @angular/Router

this.router.navigate(['/', 'search' , targetName]);

Sending params form secondcomponent

this.router.navigate(['/', 'table', targetName]);

Route Configuration

const routes: Routes = [
  {
    path: '',
    redirectTo: 'welcome',
    pathMatch: 'full'
  },
  {
    path: 'search/:name',
    component: SearchItemComponent
  },
  {
    path: 'table/:target',
    component: TableDataComponent
  }
 ]

Trying to understand why the params object would have 'target' attribute and sometimes 'name' to store value when navigated from different components.


原文:https://stackoverflow.com/questions/48914576
更新时间:2023-05-13 06:05

最满意答案

您可以使用pagecontainer小部件的beforeshow事件: http ://api.jquerymobile.com/pagecontainer/#event-beforeshow

ui参数的toPage属性返回您要导航到的页面的jQuery对象。 然后,您可以检查其ID并显示正确的文本。

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    var pageid = ui.toPage.prop("id");

    if(pageid == 'frontPage') { 
        setTitle('Front Page', ui.toPage); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', ui.toPage); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', ui.toPage); 
    }

});

function setTitle(text, page){
    page.find(".headerText").text(text);
}

DEMO

每次导航到页面时都会运行,这样您每次都可以显示不同的标题。 如果您只显示相同的标题,则可以使用pagecreate事件,因为它只在每个页面最初加载到DOM时运行一次:

$(document).on( "pagecreate", function( e ) {    
    var pageid = e.target.id;    

    if (pageid == 'frontPage') { 
        setTitle('Front Page', pageid); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', pageid); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', pageid); 
    }    
});

function setTitle(text, pageid){
    $("#" + pageid).find(".headerText").text(text);
}

DEMO


You can use the pagecontainer widget's beforeshow event: http://api.jquerymobile.com/pagecontainer/#event-beforeshow

The toPage property of the ui parameter returns a jQuery object of the page you are navigating to. You can then check its ID and display the correct text.

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    var pageid = ui.toPage.prop("id");

    if(pageid == 'frontPage') { 
        setTitle('Front Page', ui.toPage); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', ui.toPage); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', ui.toPage); 
    }

});

function setTitle(text, page){
    page.find(".headerText").text(text);
}

DEMO

This will run every time you navigate to the page so you could show different titles each time. If you only ever show the same title, you could use the pagecreate event instead as it only runs once when each page is initially loaded into the DOM:

$(document).on( "pagecreate", function( e ) {    
    var pageid = e.target.id;    

    if (pageid == 'frontPage') { 
        setTitle('Front Page', pageid); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', pageid); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', pageid); 
    }    
});

function setTitle(text, pageid){
    $("#" + pageid).find(".headerText").text(text);
}

DEMO

相关问答

更多
  • 错误是一个label标签,其for属性不正确: 应该: 这是一个演示: http : //jsfiddle.net/zcUs2/ The error was a label tag that had a for attribute that was not correct: Should ...
  • 你应该使用jQuery手机特定的方法。 $.mobile.changePage("Home.html"); 请参阅document-location-href-location-vs-mobile-changepagelocation Thanks Dipaks Instead of document.location.href = "/Home.html"; I have modified it as like below document.location.href = "./Home.html"; ...
  • 您可以使用beforeSend并complete $.ajax事件来调用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg 。 看起来像这样: $('#main').live('pagecreate', function(event) { $.ajax({ beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner ...
  • 您可以使用pagecontainer小部件的beforeshow事件: http ://api.jquerymobile.com/pagecontainer/#event-beforeshow ui参数的toPage属性返回您要导航到的页面的jQuery对象。 然后,您可以检查其ID并显示正确的文本。 $(document).on( "pagecontainerbeforeshow", function( event, ui ) { var pageid = ui.toPage.prop("id") ...
  • 在多个HTML文件的情况下, HEAD仅加载到第一个HTML文件中。 在其他文件中,只加载BODY内容。 这是因为AJAX用于将其他页面加载到DOM 。 由于原始DOM已经有HEAD内容,因此只能从其他页面加载主体。 如果您完全加载AJAX加载,或者如果初始化第一个HTML文件中的所有js文件,这可以被阻止。 如果你想了解更多,可以看看我的其他答案和其他几种解决方案,或者在这里找到答案 。 示例1:正确的方法 HTML 1: ... </div> </div> </li> <li class="tw_li clearfix"> <div class="tw_li_con"> <div class="tw_li_title"> <h2><a href="/wenda/jquerymobileforcereloadingpagejz_316" target="_blank">jQuery Mobile Force Reloading Page'加载页错误'(jQuery Mobile Force Reloading Page 'Error Loading Page')</a><i>[2022-04-22] </i></h2> </div> <div class="tw_li_cont"> 您是否尝试使用两个页面,例如: yourpage.php和yourpageappcache.php以及yourpageappcache.php : <?php header('Location: yourpage.php?appcache=true');?> I managed to solve the issue by disabling ajax before jQuery mobile has loaded. As in this answer: How To Disable Ajax In jQu ... </div> </div> </li> <li class="tw_li clearfix"> <div class="tw_li_con"> <div class="tw_li_title"> <h2><a href="/wenda/jquerymobilejzbdtjym_470" target="_blank">JQuery Mobile,加载表单提交页面的问题(JQuery Mobile, problem with loading form submitted pages)</a><i>[2022-01-12] </i></h2> </div> <div class="tw_li_cont"> 下面这个脚本应放在你的jquery min和你的jquery mobile min之间。 否则它不会生效。 在关闭这些ajax功能的情况下向$ .mobile添加扩展程序可能有助于解决您的问题。 所有3个都不需要,但它们都适合您的问题。 <script> $(document).bind('mobileinit',function(){ $.extend( $.mobile , { ajaxFormsEnabled: false, ... </div> </div> </li> <li class="tw_li clearfix"> <div class="tw_li_con"> <div class="tw_li_title"> <h2><a href="/wenda/jquerymobilejiazai_502" target="_blank">Jquery Mobile - 加载问题(Jquery Mobile - loading issue)</a><i>[2022-05-05] </i></h2> </div> <div class="tw_li_cont"> jQuery Mobile通过Ajax加载页面,因为它依赖于哈希URL更改和Ajax导航。 要禁用通过Ajax加载页面,您需要遵循以下任何方法。 1)全球: <script src="js/jquery.js"></script> <script language="text/javascript"> $(document).on('mobileinit', function () { $.mobile.ajaxEnabled = false; }); </script> <script ... </div> </div> </li> <li class="tw_li clearfix"> <div class="tw_li_con"> <div class="tw_li_title"> <h2><a href="/wenda/jquerymobiledymrcwjzymxxerrorloa_524" target="_blank">jQuery mobile:如何调用此(默认)错误加载页面消息?(jQuery mobile: How to invoke this (default) error loading page message?)</a><i>[2023-09-02] </i></h2> </div> <div class="tw_li_cont"> //show error message $( "<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>YOUR MESSAGE</h1></div>" ) .css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 }) .appendTo( $.mobile.pageContainer ) .delay( 800 ... </div> </div> </li> <li class="tw_li clearfix"> <div class="tw_li_con"> <div class="tw_li_title"> <h2><a href="/wenda/jquerymobilehzscjzymsxsdcck_541" target="_blank">Jquery mobile:如何在首次加载页面时显示弹出窗口?(Jquery mobile: How to show popup only when first loading the page?)</a><i>[2022-08-27] </i></h2> </div> <div class="tw_li_cont"> 您可以使用sessionStorage或localStorage来跟踪与是否显示弹出窗口相关的信息。 您的代码将如下所示 if (localStorage.popUpShown != 'true') { // window will position the pop up to center $('#popup').popup('open', {positionTo: 'window'}); localStorage.popUpShown = 'true'; ... </div> </div> </li> </ul> </div> <div class="main_right"> <div class="search-out"> <div class="search"> <form action="/wenda" target="_blank" method="get"> <input type="search" autocorrect="off" autocomplete="off" placeholder="请输入关键词" id="q" name="q" value=""> <button class="btn_s" type="submit">搜索</button> </form> </div> </div> <div class="commonh"> <h2>相关文章</h2> <span class="fr"><a href="/jiaocheng" target="_blank">更多</a></span> </div> <div class="right_list"> <li> <a title="Param's Blog: Nutch 1.3 and Solr Integration" href="/article/ParamsBlogNutch13andSolrIntegration_2" target="_blank">Param's Blog: Nutch 1.3 and Solr Integration</a> </li> <li> <a title="传智播客-带你一周hold住html.css-视频教程" href="/article/czbkdnyzholdzhtmlcssspjc_0" target="_blank">传智播客-带你一周hold住html.css-视频教程</a> </li> <li> <a title=" Rails4 已经移出了params可以解析xml的功能,拿rails4做微信API的童鞋们注意了" href="/article/Rails4yjyclparamskyjxxmldgnnrails4zwxAPIdtxmzyl_2" target="_blank"> Rails4 已经移出了params可以解析xml的功能,拿rails4做微信API的童鞋们注意了</a> </li> <li> <a title="调试时,<jsp:include>动作元素传递参数,参数值为空,可能是啥原因造成的?" href="/article/dssltjspincludegtdzyscdcscszwkknssyyzcd_4" target="_blank">调试时,<jsp:include>动作元素传递参数,参数值为空,可能是啥原因造成的?</a> </li> <li> <a title="移动终于hold不住了 联合微信正式推出流量红包业务" href="/article/ydzyholdbzllhwxzstcllhbyw_2" target="_blank">移动终于hold不住了 联合微信正式推出流量红包业务</a> </li> <li> <a title="Java泛型父类取得子类的泛型参数T的Class类型" href="/article/JavafxflqdzldfxcsTdClasslx_3" target="_blank">Java泛型父类取得子类的泛型参数T的Class类型</a> </li> <li> <a title=" qq,旺旺,微信在线代码" href="/article/qqwangwangweixinzaixiandaima_2" target="_blank"> qq,旺旺,微信在线代码</a> </li> <li> <a title="ruby微信公众帐户认证" href="/article/rubywxgzzhrz_2" target="_blank">ruby微信公众帐户认证</a> </li> <li> <a title="关于Hadoop的API写文件的备份数问题" href="/article/gyHadoopdAPIxwjdbfswt_0" target="_blank">关于Hadoop的API写文件的备份数问题</a> </li> <li> <a title="新手问一个线程同步问题" href="/article/xswygxctbwt_4" target="_blank">新手问一个线程同步问题</a> </li> </div> <div class="commonh"> <h2>最新问答</h2> <span class="fr"><a href="/wenda" target="_blank">更多</a></span> </div> <div class="right_list"> <li> <a title="获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)" href="/wenda/huoqumvcdisplaymodehouzhui_283" target="_blank">获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)</a> </li> <li> <a title="如何通过引用返回对象?(How is returning an object by reference possible?)" href="/wenda/yyfhdx_312" target="_blank">如何通过引用返回对象?(How is returning an object by reference possible?)</a> </li> <li> <a title="矩阵如何存储在内存中?(How are matrices stored in memory?)" href="/wenda/juzhencunchuzaineizhong_536" target="_blank">矩阵如何存储在内存中?(How are matrices stored in memory?)</a> </li> <li> <a title="每个请求的Java新会话?(Java New Session For Each Request?)" href="/wenda/qingqiujavaxinhui_485" target="_blank">每个请求的Java新会话?(Java New Session For Each Request?)</a> </li> <li> <a title="css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)" href="/wenda/cssfddivzzdbth1_439" target="_blank">css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)</a> </li> <li> <a title="无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)" href="/wenda/tuxiangcaffeyuceyilei_557" target="_blank">无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)</a> </li> <li> <a title="xcode语法颜色编码解释?(xcode syntax color coding explained?)" href="/wenda/xcodeyufayansebianmajieshi_364" target="_blank">xcode语法颜色编码解释?(xcode syntax color coding explained?)</a> </li> <li> <a title="在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)" href="/wenda/access2010runtimezsoffice2000xdg_422" target="_blank">在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)</a> </li> <li> <a title="从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)" href="/wenda/ddwebzjtxcsfwq_528" target="_blank">从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)</a> </li> <li> <a title="从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))" href="/wenda/jbbfzwjbljxbb_417" target="_blank">从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))</a> </li> <li> <a title="西安哪有PLC可控制编程的培训" href="/wenda/xanyplckkbcpx_36" target="_blank">西安哪有PLC可控制编程的培训</a> </li> <li> <a title="在Entity Framework中选择基类(Select base class in Entity Framework)" href="/wenda/entityframeworkzhongxuanjilei_415" target="_blank">在Entity Framework中选择基类(Select base class in Entity Framework)</a> </li> <li> <a title="在Android中出现错误“数据集和渲染器应该不为null,并且应该具有相同数量的系列”(Error “Dataset and renderer should be not null and should have the same number of series” in Android)" href="/wenda/androidzccwsjjxrqbwnullslxl_307" target="_blank">在Android中出现错误“数据集和渲染器应该不为null,并且应该具有相同数量的系列”(Error “Dataset and renderer should be not null and should have the same number of series” in Android)</a> </li> <li> <a title="电脑二级VF有什么用" href="/wenda/diannaoerjivfshenmeyong_16" target="_blank">电脑二级VF有什么用</a> </li> <li> <a title="Datamapper Ruby如何添加Hook方法(Datamapper Ruby How to add Hook Method)" href="/wenda/datamapperrubytianjiahookfangfa_475" target="_blank">Datamapper Ruby如何添加Hook方法(Datamapper Ruby How to add Hook Method)</a> </li> <li> <a title="金华英语角." href="/wenda/jinhuayingyujiao_31" target="_blank">金华英语角.</a> </li> <li> <a title="手机软件如何制作" href="/wenda/sjrjzz_103" target="_blank">手机软件如何制作</a> </li> <li> <a title="用于Android webview中图像保存的上下文菜单(Context Menu for Image Saving in an Android webview)" href="/wenda/yyandroidwebviewztxbcsxwcd_150" target="_blank">用于Android webview中图像保存的上下文菜单(Context Menu for Image Saving in an Android webview)</a> </li> <li> <a title="注意:未定义的偏移量:PHP(Notice: Undefined offset: PHP)" href="/wenda/wdypylphp_555" target="_blank">注意:未定义的偏移量:PHP(Notice: Undefined offset: PHP)</a> </li> <li> <a title="如何读R中的大数据集[复制](How to read large dataset in R [duplicate])" href="/wenda/durzhongdashujujifuzhi_350" target="_blank">如何读R中的大数据集[复制](How to read large dataset in R [duplicate])</a> </li> <li> <a title="Unity 5 Heighmap与地形宽度/地形长度的分辨率关系?(Unity 5 Heighmap Resolution relationship to terrain width / terrain length?)" href="/wenda/unityheighmapdxkddxzdfblgx_375" target="_blank">Unity 5 Heighmap与地形宽度/地形长度的分辨率关系?(Unity 5 Heighmap Resolution relationship to terrain width / terrain length?)</a> </li> <li> <a title="如何通知PipedOutputStream线程写入最后一个字节的PipedInputStream线程?(How to notify PipedInputStream thread that PipedOutputStream thread has written last byte?)" href="/wenda/tzpipedoutputstreamxcxrygzpipedi_163" target="_blank">如何通知PipedOutputStream线程写入最后一个字节的PipedInputStream线程?(How to notify PipedInputStream thread that PipedOutputStream thread has written last byte?)</a> </li> <li> <a title="python的访问器方法有哪些" href="/wenda/pythonfangwenqifangfa_93" target="_blank">python的访问器方法有哪些</a> </li> <li> <a title="DeviceNetworkInformation:哪个是哪个?(DeviceNetworkInformation: Which is which?)" href="/wenda/devicenetworkinformation_95" target="_blank">DeviceNetworkInformation:哪个是哪个?(DeviceNetworkInformation: Which is which?)</a> </li> <li> <a title="在Ruby中对组合进行排序(Sorting a combination in Ruby)" href="/wenda/rubyzhongzuhepaixu_148" target="_blank">在Ruby中对组合进行排序(Sorting a combination in Ruby)</a> </li> <li> <a title="网站开发的流程?" href="/wenda/wangzhankaifadeliucheng_75" target="_blank">网站开发的流程?</a> </li> <li> <a title="使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)" href="/wenda/zendframeworkzjoinsqljssj_199" target="_blank">使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)</a> </li> <li> <a title="条带格式类型格式模式编号无法正常工作(Stripes format type format pattern number not working properly)" href="/wenda/tdgslxgsmsbhgz_207" target="_blank">条带格式类型格式模式编号无法正常工作(Stripes format type format pattern number not working properly)</a> </li> <li> <a title="透明度错误IE11(Transparency bug IE11)" href="/wenda/toumingducuowuie11_313" target="_blank">透明度错误IE11(Transparency bug IE11)</a> </li> <li> <a title="linux的基本操作命令。。。" href="/wenda/linuxdejibencaozuomingling_66" target="_blank">linux的基本操作命令。。。</a> </li> </div> </div> </div> </div> <div style="clear:both;"></div> <div class="footer"> <div class="mainbox"> <div class="info"> <p>Copyright ©2023 <a href="https://www.peixunduo.com" target="_blank">peixunduo.com</a> All Rights Reserved.<a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备14003112号</a> </p> <p>本站部分内容来源于互联网,仅供学习和参考使用,请莫用于商业用途。如有侵犯你的版权,请联系我们(neng862121861#163.com),本站将尽快处理。谢谢合作!</p> </div> </div> </div> <script type="text/javascript" src="/resources/js/common.js?v=324"></script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?9eebaceb5e4371a0aad59712a1a1ecff"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>