Question

我有一个搜索过滤器页面，用于显示搜索产品，并在用户点击搜索产品时以模式显示产品详细信息。

我想在用户点击产品时以编程方式设置activatedRoute的现有id可选参数。这就是为什么它是可选的 - 在第一次加载时，它将没有参数，直到用户点击它 - 然后他们可以通过复制并从浏览器URL粘贴它来点击特定产品的链接。

这是我尝试以编程方式设置可选参数：

路线：

$(document).ready(function(){
    // Set the event handler before resource is loaded
    $('#button').on('click', triggerButton);
    // define the handler
    function triggerButton() {
        // display some information that tells the user the status
        alert('loading...');
    }  

    $.getJSON('http://example.com', function(data){
        //inside this function I call another api using the data response.
        $.get('example.url', function(response){
             //do something with this data of the response and ended function
        });

        // update the event handler
        $('#button').off('click', triggerButton).on('click', function(){
            // do some things...
        });
    });
});

设置activatedRoute id可选参数：

$(document).ready(function(){
    var webData = null;
    var loading = false;

    function loadData(){
        $.getJSON('http://example.com', function(data){
            //inside this function I call another api using the data response.
            $.get('example.url', function(response){
                 //do something with this data of the response and ended function
            });

            // expose the data to be used by button click event hander or other
            // funcitons that care about the data 
            webData = data;
        });
    }

    // Set the event handler
    $('#button').on('click', triggerButton);
    // define the handler
    function triggerButton() {
        if(webData){
            // do something with the webData

        }else{
            // display some information that tells the user the status
            alert('loading...');
            if(!loading){
                loading = true;
                loadData();
            }
        }
    }  
});

理想情况下，我想删除底线以停止物理导航，这会浪费资源

编辑：这似乎有效：

export const routerConfig: Routes = [
   {
      component: LandingPageComponent,
      path: "",
   },
   {
      component: FindPageComponent,
      path: "find/:id",
   },
   {
      component: FindPageComponent,
      path: "find",
   },...

然而它不会更改网址，我猜是因为它不会再次加载网页

Answer 1

请参阅this response，有关可选参数，我认为您需要使用查询参数！

设置activatedRoute可选参数“id”而不进行导航

1 个答案: