anglar 跳转子页面

最新推荐文章于 2023-05-06 23:02:13 发布

泡泡妞1989

最新推荐文章于 2023-05-06 23:02:13 发布

阅读量527

点赞数

分类专栏：跳转子页面文章标签： angular 跳转子页面

本文链接：https://blog.youkuaiyun.com/u012447756/article/details/72765077

版权

跳转子页面专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Angular应用中实现从父组件到子组件的跳转，包括使用路由器导航的方法和最佳实践，帮助开发者更好地理解和掌握Angular路由操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        
  // 主页面的js部分的需要加入下面的指令 
 
  uzai. 
  directive( 
  'script', ( 
  $compile)  
  => ({ 
 
  restrict:  
  'E', 
 
  scope:  
  false, 
 
  link( 
  scope,  
  elem,  
  attr) { 
 
  if ( 
  attr. 
  type ===  
  'text/javascript-lazy' ||  
  elem. 
  text(). 
  indexOf( 
  'childrenFunction.') > - 
  1) { 
 
  if ( 
  attr. 
  ngSrc) { 
 
  let  
  script =  
  document. 
  createElement( 
  'script'); 
 
  script. 
  setAttribute( 
  'type',  
  'text/javascript'); 
 
  script. 
  setAttribute( 
  'src',  
  attr. 
  ngSrc); 
 
  $doc. 
  body. 
  appendChild( 
  script); 
 
  return; 
 
                   }  
  else { 
 
  let  
  code =  
  elem. 
  text(); 
 
  let  
  f =  
  new  
  Function( 
  code); 
 
  f(); 
 
                   } 
 
               } 
 
           } 
 
    }));

   let  
   childrenFunction = { 
  
   costnotice:  
   function() {  
  
   api. 
   endloading(); 
  
   setTimeout( 
   function() { 
  
   //计算子页面高度 
  
   individualdetail. 
   jticketshow(); 
  
                },  
   0); 
  
            }, 
  
 }; 
 
  window. 
  childrenFunction =  
  window. 
  childrenFunction ||  
  childrenFunction; 
 
其他js

   append:  
   function( 
   viewName,  
   data,  
   $http,  
   $scope,  
   $compile) { 
  
   var  
   angular =  
   window. 
   angular, 
  
   createElement =  
   document. 
   createElement( 
   'section'), 
  
   elementObj, 
  
   el, 
  
   scriptsData =  
   '<script type="text/javascript">' +  
   'childrenFunction.' +  
   viewName +  
   '();' +  
   '</script>'; 
  
   var  
   htmlData; 
  
   if ( 
   api. 
   isApp()) { 
  
   if ( 
   typeof( 
   data) ==  
   'string') { 
  
   if ( 
   devicetype ===  
   'android') { 
  
   htmlData =  
   decodeURIComponent( 
   data); 
  
   data = { 
  
   ErrorCode:  
   200, 
  
   JsonResult:  
   htmlData 
  
                            }; 
  
                        }  
   else { 
  
   data =  
   JSON. 
   parse( 
   data); 
  
                        } 
  
                    } 
  
   if ( 
   data. 
   ErrorCode !=  
   200 ||  
   data. 
   JsonResult. 
   trim() ==  
   '') { 
  
   api. 
   endloading(); 
  
   if ( 
   devicetype ===  
   'android') { 
  
   console. 
   log( 
   '安卓子页面错误:' +  
   data); 
  
                        }  
   else { 
  
   api. 
   toast( 
   data. 
   ErrorMsg); 
  
                        } 
  
   if ( 
   data. 
   JsonResult. 
   trim() ==  
   '') { 
  
   window. 
   location. 
   hash =  
   ''; 
  
   return; 
  
                        } 
  
                    } 
  
   if ( 
   devicetype ==  
   'ios') { 
  
   elementObj =  
   angular. 
   element( 
   decodeURIComponent( 
   data. 
   JsonResult) +  
   scriptsData); 
  
                    }  
   else { 
  
   var  
   html =  
   decodeURIComponent( 
   data. 
   JsonResult). 
   replace( 
   /&acute;/ 
   g,  
   '\''); 
  
   html =  
   html. 
   replace( 
   /&quot;/ 
   g,  
   '"'); 
  
   elementObj =  
   angular. 
   element( 
   html +  
   scriptsData); 
  
                    } 
  
                }  
   else { 
  
   elementObj =  
   angular. 
   element( 
   data +  
   scriptsData); 
  
                } 
  
   createElement. 
   id =  
   'J_router_' +  
   viewName; 
  
   createElement. 
   className +=  
   'J-router J-router-' +  
   viewName; 
  
   angular. 
   element( 
   document. 
   body). 
   append( 
   createElement); 
  
   el =  
   $compile( 
   elementObj)( 
   $scope); 
  
   angular. 
   element( 
   createElement). 
   append( 
   el); 
  
   var  
   routerElements =  
   document. 
   querySelectorAll( 
   '.J-router'); 
  
   if ( 
   routerElements. 
   length >  
   0) { 
  
   api. 
   __scrolltop__ =  
   document. 
   body. 
   scrollTop; 
  
                    []. 
   filter. 
   call( 
   routerElements,  
   function( 
   el) { 
  
   el. 
   classList. 
   remove( 
   'J-router-show'); 
  
                    }); 
  
                } 
  
   setTimeout( 
   function() { 
  
   document. 
   getElementsByClassName( 
   'uzai-wrapper')[ 
   0]. 
   classList. 
   add( 
   'hide'); 
  
   createElement. 
   classList. 
   add( 
   'J-router-show'); 
  
   //angular.element(createElement).addClass('J-router-show').siblings().removeClass('J-router-show'); 
  
                },  
   500); 
  
            } 
  
        }; 
  
  < 
  a   
  href= 
  "#/页面名称" 
  ></a>