title: How to use Angular structural directive with multiple inputs
body: <p>I want to implement something similar with <a href="https://github.com/Narzerus/angular-permission" rel="noreferrer">angular-permisssion</a>. And with requirement to control the element's existance, I need to use angular <a href="https://angular.io/docs/ts/latest/guide/structural-directives.html" rel="noreferrer">structural directive</a>.</p>
  
  <p>At the beginning, i think such syntax would work:</p>
  
  <pre><code>&lt;h2 *permissionIf [permissionIfExcept]="'Read'"&gt;Except&lt;/h2&gt;
  </code></pre>
  
  <p>However, it doesn't work that way.</p>
  
  <p>Moreover, the offical guide only teach you how to write custom structural directive with single input.
  With multi-inputs, some third-party tutorials involve a bit. But that's using the angular template micro-syntax to achieve data binding. Then one problem occurs:
  template syntax doesn't support pure key-value inputs:</p>
  
  <pre><code>&lt;h2 *permissionIf="except: map.except；only: 'test'"&gt;Except&lt;/h2&gt;
  </code></pre>
  
  <p>It expands into this(which is illegal):</p>
  
  <pre><code>&lt;h2 template="permissionIf except: map.except；only: 'test'"&gt;Except&lt;/h2&gt;
  </code></pre>
  
  <p>A stupid temporary solution is add a useless variable declaration.</p>
  
  <pre><code>&lt;h2 *permissionIf="let i;except: map.except；only: 'test'"&gt;Except&lt;/h2&gt;
  </code></pre>
  
  <p>Another inconvenient way is to use template element to wrap the code.</p>
  
  <pre><code>&lt;template permissionIf [permissionIfExcept]="'Read'"&gt;
    &lt;h2&gt;Except&lt;/h2&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The above all are not accepetable enough. But I can't find a bette way to resolve it.</p>
  
  <p>Hope some guys can give some suggestion:).</p>